React render流程梳理

栏目: IOS · Android · 发布时间: 5年前

内容简介：当通过create-react-app初始化一个项目的时候,上面这段代码就在浏览器中绘制出了内容.ReactDOM.render(ReactElement, Container, callback)是怎么将React组件绘制到浏览器中的呢?本文是React源码阅读系列的起始篇,在这篇文章中主要围绕以下两个方面进行介绍:阅读源码是一个知其然知其所以然的过程.通过源码阅读的过程中我们能学习到一些设计,代码优化,解决方案等,通过这些来反哺实际工作的遇到的问题.这个也是这个系列想要获得并且与大家分享的内容.以下所有

前言

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源码阅读系列的起始篇,在这篇文章中主要围绕以下两个方面进行介绍:

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

阅读源码是一个知其然知其所以然的过程.通过源码阅读的过程中我们能学习到一些设计,代码优化,解决方案等,通过这些来反哺实际工作的遇到的问题.这个也是这个系列想要获得并且与大家分享的内容.

如何阅读React源码

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

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

以下所有代码基于React 16.8.6

走入ReactDOM.render()源码

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

React render流程梳理

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

React render流程梳理

由于是首次mount,这个时候还没有root节点并且是应用的根节点这里直接进行root节点的创建.最后调用root的render方法就开始进行页面的绘制.在legacyCreateRootFromDOMContainer方法中会对当前容器的内容进行清理.这里调用创建了ReactRoot节点.

React render流程梳理

createContainer根据当前的container信息来创建根容器.

定位到packages/react-reconciler/src/ReactFiberReconciler.js

React render流程梳理

定位到packages/react-reconciler/src/ReactFiberRoot.js(Fiber !!!!!!)

在createFiberRoot方法中,创建了根据当前的容器信息创建了FiberRootb并且创建了一个HostRootFiber进行相互引用.

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

React render流程梳理

通过启动最开始create-react-app创建的项目,可以看到以下的输出.

后记

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

React render流程梳理

欢迎大家关注我的公众号,一起进步

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Compilers

Alfred V. Aho、Monica S. Lam、Ravi Sethi、Jeffrey D. Ullman / Addison Wesley / 2006-9-10 / USD 186.80

This book provides the foundation for understanding the theory and pracitce of compilers. Revised and updated, it reflects the current state of compilation. Every chapter has been completely revised ......一起来看看《Compilers》这本书的介绍吧!

码农工具