[完结16章]React18内核探秘：手写React高质量源码迈向高阶开发
网盘地址：https://pan.baidu.com/s/16RjIJRIXrJFaAjHkvgj9gQ 提取码：over
腾讯微云下载地址：https://share.weiyun.com/JH3ozd2p 密码：w5gz2n

React源码教程下载-React18内核探秘：手写React高质量源码迈向高阶开发，手写 React 高质量源码，迈向高阶开发

React 源码解析是一种对 React 框架内部实现原理的分析，以及了解 React 的工作原理。它可以帮助我们更好地理解 React，并且可以帮助我们更好地调试和优化 React 应用程序。

React 源码解析是一种对 React 框架内部实现原理的分析，以及了解 React 的工作原理。它可以帮助我们更好地理解 React，并且可以帮助我们更好地调试和优化 React 应用程序。

react分为几个模块
scheduler（调度器）：排列优先级，优先级高的先执行reconciler
reconciler（协调器）：render阶段（主要工作：构建Fiber树和生成effectList），找哪个节点改变，打不同的tag（形成effectlist链表，记录需要更新的节点），创建或更新fiber节点（diff算法），采用深度优先遍历
renderer（渲染器）：commit阶段，将reconciler打好标签的节点（主要遍历effectList），渲染到视图
scheduler、reconciler在内存中进行，不影响真实节点
react 17版本的出现，带来了全新的concurrent mode，包含一类功能的合集（fiber、scheduler、lane、suspense），核心是实现了一套，异步可中断，带优先级的更新。

1. 配置 React 源码本地调试环境
使用 create-react-app 脚手架创建项目
npx create-react-app react-test
弹射 create-react-app 脚手架内部配置
npm run eject
克隆 react 官方源码 (在项目的根目录下进行克隆)
git clone --branch v16.13.1 --depth=1

函数分析
从 Demo 我们看到，整个项目先通过 createRoot 这个函数创建一个 root 对象，再通过 root 的 render 方法将 App 这个组件渲染到网页上

createRoot
我们先看 createRoot 这个方法具体做了什么事情。这个方法来自 react-dom 这个包。我们可以在源码中 packages / react-dom / src / client / ReactDOMRoot.js 中找到 createRoot 的具体实现（前面在 ReactDOM.js 做了一些关于环境的条件判断，可先忽略）
createRoot 函数有两个参数 container 和 options，其中 options 是可选参数，本章为了简单起见先不讨论；

该函数大概实现的功能就是：
创建容器对象 FiberRootNode
事件委托处理
根据 FiberRootNode 对象返回 ReactDOMRoot 对象