Wandra的React小册

useDebugValue是一个React Hook，允许您在React DevTools中添加标签(label)到自定义Hook 在自定义Hook的顶层调用useDebugValue以显示可读的调试

useId是一个 React Hook，用于生成可以传递给可访问性属性的唯一 ID。 useId不带任何参数。useId返回与此特定组件中的此特定useId调用关联的唯一 ID 字符串。 useId是

useMemo是一个 React Hook，可让您在重新渲染之间缓存计算结果。 在组件的顶层调用useMemo来缓存重新渲染之间的计算： 参数： calculateValue ：计算要缓存的值的函数。

useLayoutEffect可能会影响性能。如果可能，更推荐使用useEffect。Effects只在客户端上运行。 它们不会在服务器渲染期间运行。如果在useLayoutEffect中触发状态更新

useRef是一个 React Hook，可让您引用渲染不需要的值 ；与状态不同，它是可变（mutabal）的,但是，如果它包含用于渲染的对象（例如，状态的一部分），那么您不应该改变该对象。

具有分布在多个事件处理程序中的许多状态更新的组件可能会让人不知所措。对于这些情况，您可以将组件外部的所有状态更新逻辑合并到一个函数中，称为“ reducer”。 使用reducer整合状态逻辑 随着组

useState返回的set函数允许您将状态更新为不同的值并触发重新渲染。您可以直接传递下一个状态，或者根据前一个状态计算它的函数：

useEffect是一个 React Hook，可让您将组件与外部系统同步。例如，您可能希望根据 React 状态控制非 React 组件、设置服务器连接或在组件出现在屏幕上时发送分析日志。Effec

有些组件需要与外部系统同步。例如，您可能希望根据 React 状态控制非 React 组件、设置服务器连接或在组件出现在屏幕上时发送分析日志。 Effects允许您在渲染后运行一些代码，以便您可以将组

Redux的作者Dan加入React核心团队后的一大贡献就是“将Redux的理念带入React”。这里面最显而易见的影响莫过于useState与useReducer这两个Hook。本质来说，useSt

在上一节我们实现了一个极简的useState，了解了Hooks的运行原理。 本节我们讲解Hooks的数据结构，为后面介绍具体的hook打下基础。 dispatcher 在上一节的极简useState实

为了更好理解Hooks原理，这一节我们遵循React的运行流程，实现一个不到 100 行代码的极简useState Hook。建议对照着代码来看本节内容。 工作原理 对于useState Hook，考

Scheduler与React是两套优先级机制。在React中，存在多种使用不同优先级的情况，比如： 注：以下例子皆为Concurrent Mode开启情况 过期任务或者同步任务使用同步优先级。 用户

Scheduler，他包含两个功能： 时间切片 优先级调度 本节我们学习这个两个功能是如何在Scheduler中实现的。 时间切片原理 时间切片的本质是模拟实现requestIdleCallback。

要实现Concurrent Mode，最关键是实现异步可中断的更新。基于这个前提，React花费2年时间重构完成了Fiber架构，将单个组件作为工作单元，使以组件为粒度的“异步可中断的更新”成为可能。

由于 JS 的同步执行阻塞了主线程，所以此时 JS 已经可以获取到新的DOM，但是浏览器对新的DOM并没有完成渲染。该阶段触发的生命周期钩子和hook可以直接访问到已经改变后的DOM，即该阶段是可以参

本节我们看看before mutation阶段（执行DOM操作前）都做了什么。 整个过程就是遍历effectList并调用commitBeforeMutationEffects函数处理。我们重点关注b

commitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参，commitRoot(root)。 rootFiber.firstEffect上保存了一条需要执行副作用的F

在流程概览一节我们了解组件在render阶段会经历beginWork与completeWork。上一节我们讲解了组件执行beginWork后会创建子Fiber节点，节点上可能存在effectTag。这

React18原版源码中一共有最关键的三个包，分别是是react、react-dom、reconciler。 react包，专注于组件相关核心API的暴露，这部分内容是跨平台的，不管是服务端渲染，客户