React render流程梳理

前言

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
复制代码

当经过create-react-app初始化一个项目的时候,上面这段代码就在浏览器中绘制出了内容.ReactDOM.render(ReactElement, Container, callback)是怎么将React组件绘制到浏览器中的呢?本文是React源码阅读系列的起始篇,在这篇文章中主要围绕如下两个方面进行介绍:

1. render()方法调用中相关函数的调用
2. render()方法调用中产生的数据结构的梳理

阅读源码是一个知其然知其因此然的过程.经过源码阅读的过程当中咱们能学习到一些设计,代码优化,解决方案等,经过这些来反哺实际工做的遇到的问题.这个也是这个系列想要得到而且与你们分享的内容.

如何阅读React源码

1. React仓库是一个包含多个package的仓库.在阅读源码以前须要对独立的仓库有个简单的认识.好比react经过react-reconciler和react-dom来完成web页面的构建.
   
2. debugger
   经过debugger来一步一步跟踪函数的调用.

ReactDOM.render()调用过程当中的函数调用

如下全部代码基于React 16.8.6

• 

走入ReactDOM.render()源码

首先定位到packages/react-dom/src/client/ReactDOM.js

能够看到ReactDOM.render()方法将当前的ReactElement和Container信息传递给了legacyRenderSubtreeIntoContainer.

因为是首次mount,这个时候尚未root节点而且是应用的根节点这里直接进行root节点的建立.最后调用root的render方法就开始进行页面的绘制.在legacyCreateRootFromDOMContainer方法中会对当前容器的内容进行清理.这里调用建立了ReactRoot节点.


createContainer根据当前的container信息来建立根容器.
定位到packages/react-reconciler/src/ReactFiberReconciler.js

定位到packages/react-reconciler/src/ReactFiberRoot.js(Fiber !!!!!!)
在createFiberRoot方法中,建立了根据当前的容器信息建立了FiberRootb而且建立了一个HostRootFiber进行相互引用.

ReactDOM.render()调用过程当中的数据结构

经过启动最开始create-react-app建立的项目,能够看到如下的输出.

后记

这篇文章只梳理了React在实际调用渲染函数以前的函数调用和数据结构.在这个过程当中终于盼来了千呼万唤的fiber.以后的文章会继续深刻react的渲染流程和fiber的实现来对react进行学习.

                                            

                                                欢迎你们关注个人公众号,一块儿进步