React18 - 源码系列

聊生命周期， 就是从类组件生命周期函数的角度来聊 React 的挂载和更新的渲染流程。 ### mount 阶段 `React Reconcil` 阶段 会在 `beginWork` 函数 中挂载类组

JSX JSX是 ECMAScript 的语法拓展，我们可以用 JSX 语法 来更加灵活，自如，声明式的表达 React UI组件，JSX最终都会被编译器转译成为 ECMAScript。 旧转换 新转

legacy 模式 下的 setState legacy 模式下：也就是 通过 ReactDom.render() 方法来挂载时，setState 在 生命周期函数，事件函数当中是批量异步更新，而在定

ErrorBoundary React 通过深度优先遍历来调度 Fiber ，所以 ErrorBoundary 组件 有能力捕获到渲染期间子组件发生的异常，并且会阻止异常继续传播，不会导致整个应用程序

如何解决饥饿问题： 第一步： 在每次调度更新都会执行的 ensureRootIsScheduled 调用 markStarvedLanesAsExpired 函数。 第二步： 在 markStarve

批量更新效果展示： 我们发现，触发三次 setNumber， App 组件 只渲染一次，并且 number 值可以更新为 4。 批量更新原理 第一：当点击的时候， 触发第一次 setNumber, 调

打断低优先级任务效果展示： 问题：下面这段 React 代码的点击按钮时的更新流程是怎样的？ https://juejin.cn/post/7185092839582203962 ， 初次渲染我们已经

问题：下面这段 React 代码的初次渲染流程是怎样的？ 第一：调用 createRoot 函数, 传入 root 节点。创建 FiberRoot 节点。 第二：调用 render 函数，在 upda

useMemo 原理 问题: 下面这段代码，从挂载到更新发生了什么？怎么挂载的？怎么更新的。 useMemo mount 挂载阶段 第一：判断是函数节点的 tag 之后，调用 renderWithHo

读完收获 学会 Dom 事件流 理解 事件委托 掌握 React 合成事件原理 Dom 事件流 事件流包含三个阶段: 事件捕获阶段 目标阶段 事件冒泡阶段 首先发生的是事件捕获，然后是实际的目标接收到

学完本文你将收获： 当我们 React.creataContext() 时 发生了什么？ Context.Provider 是如何挂载与更新的？ useContext 是怎么样获取到上下文对象的？ 从

如果我们想让 ref.current 修改的时候页面刷新，该怎么办，笔者的想法是 通过 Object.definedProperty 中定义 settter getter ，修改的时候 调

附加面试题： 为什么不能在条件和循环里使用Hooks? 为什么不能在函数组件外部使用Hooks? React Hooks的状态保存在了哪里? useReducer 原理 问题: 下面这段代码，从挂载到

useEffect 原理 问题: 下面这段代码，从挂载到更新发生了什么？怎么挂载的？怎么更新的。 useEffect mount 挂载阶段 第一：判断是函数节点的 tag 之后，调用 renderWi

[React Origin Code] 2022年来聊聊React Mount-- renderRootSync

[React Origin Code] 2022年来聊聊React Diff -- reconcileChildFibers