React render流程解析

最新推荐文章于 2024-08-08 11:34:48 发布

墨客的全栈之路

最新推荐文章于 2024-08-08 11:34:48 发布

阅读量484

点赞数

分类专栏：源码解读文章标签： react.js

本文链接：https://blog.csdn.net/schooling_chan/article/details/120249844

版权

本文深入解析React的render流程，从入口函数开始，涵盖调试代码、render函数、legacyRenderSubtreeIntoContainer、createLegacyRoot及其相关过程，最后总结关键步骤，帮助理解React同步渲染的工作原理。

摘要由CSDN通过智能技术生成

学习react源码首先从react入口函数开始学习，这篇文章你将学习到如何进行调试代码和学会react render执行流程。

调试代码

这里只是进行简单的流程介绍，具体的可以看卡颂老师的拉取源码教程

# 拉取代码
git clone https://github.com/facebook/react.git

# 执行打包命令
yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE

# 通过yarn link改变依赖包指向
cd build/node_modules/react
yarn link
cd build/node_modules/react-dom
yarn link

# 通过create-react-app创建应用后
yarn link react react-dom

render

render函数是执行react同步渲染的入口函数，在react18之前还是使用这个函数作为主入口。

render 接受三个参数，第一个参数是ReactElement，第二个参数为组件所要挂载的DOM节点，第三个参数为回调函数。

// 调用
ReactDOM.render(<App />, document.getElementById("root"));
// 源码
function render(element, container, callback) {
  // 判断是否是有效dom节点
  if (!isValidContainer(container)) {
    //省略
  }

  {
    // 是否已经是根节点
    var isModernRoot = isContainerMarkedAsRoot(container) && container._reactRootContainer === undefined;
    // 下面是抛出错误
  }
  // 挂载节点
  return legacyRenderSubtreeIntoContainer(null, element, //jsx根节点
  container, //root节点
  false, callback //回调
  );
}

有效节点

var ELEMENT_NODE = 1;//元素节点
var TEXT_NODE = 3;//文本节点
var COMMENT_NODE = 8;//注释节点
var DOCUMENT_NODE = 9;//文档，DOM树根节点
var DOCUMENT_FRAGMENT_NODE = 11;//节点片段

legacyRenderSubtreeIntoContainer

react-dom\src\client\ReactDOMLegacy.js

function legacyRenderSubtreeIntoContainer(
    parentComponent: ? React$Component <any, any> ,// 父节点
    children : ReactNodeList,// <App />
    container