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流程梳理

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

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

查看所有标签

猜你喜欢:

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

码农书籍

C++程序设计原理与实践

（美）Bjarne Stroustrup / 王刚等 / 机械工业出版社 / 2010.7 / 108.00元

本书是经典程序设计思想与C++开发实践的完美结合，是C++之父回归校园后对C++编程原理和技巧的全新阐述。书中全面地介绍了程序设计基本原理，包括基本概念、设计和编程技术、语言特性以及标准库等，教你学会如何编写具有输入、输出、计算以及简单图形显示等功能的程序。此外，本书通过对C++思想和历史的讨论、对经典实例（如矩阵运算、文本处理、测试以及嵌入式系统程序设计）的展示，以及对C语言的简单描述，为你呈现......一起来看看《C++程序设计原理与实践》这本书的介绍吧!

码农工具