preface

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

When initializing a project with the create-React-app, the above code draws the content in the browser. Reactdom.render (ReactElement, Container, callback) draws the React component to the browser. This article is the first part of the React source code reading series. In this article, the following two aspects are mainly introduced:

  1. The call to the related function in the render() method call
  2. A carding of the data structures generated in the render() method call

Reading source code is a process of knowing what it is and why it is. Through the process of reading the source code, we can learn some design, code optimization, solutions, etc., through these to feed the actual work encountered problems. That’s what this series wants to get and share with you.

How to read React source code

  1. The React warehouse is a warehouse that contains multiple packages. Before reading the source code, you need to have a brief understanding of the individual repositories. For example, React builds web pages through the React-Reconciler and react-DOM.
  2. The debugger tracks function calls through the debugger step by step.

Function call during the reactdom.render () call

All of the following code is based on React 16.8.6

Step into the reactdom.render () source code

First locate the packages/react – dom/SRC/client/ReactDOM js



Can see ReactDOM. Render () method will be the current ReactElement and Container information is passed to the legacyRenderSubtreeIntoContainer.



Since this is the first time to mount the application, the root node has not been created and is the root node of the application. Finally, call root’s render method to start drawing the page. In legacyCreateRootFromDOMContainer method to clean up the current content of the container. This call creates the ReactRoot node.





CreateContainer Creates the root container based on the current container information.

Locate the packages/react – the reconciler/SRC/ReactFiberReconciler. Js



Locate the packages/react – the reconciler/SRC/ReactFiberRoot js (Fiber!!!!!!)

In the createFiberRoot method, FiberRootb is created based on the current container information and a HostRootFiber is created to reference each other.

The data structure in the reactdom.render () call



You can see the following output by launching the project created initially with the CREate-React-app.

Afterword.

This article only combs through React’s function calls and data structures before actually calling the render function. In this process, we finally see the much-anticipated Fiber. The following articles will go into the React rendering process and the implementation of Fiber to learn about React.

                                            

Welcome to follow my public account, progress together