揭秘 React 源码：副作用 Hook 的运作原理

前端

2023-10-06 02:08:14

React 中的副作用 Hook：深度解析其运作原理

初识副作用 Hook

想象一下，你在建造一栋房子。除了搭建框架和安装墙壁之外，你还需要进行一些额外的操作，比如粉刷墙壁、安装灯具和连接水管。这些操作称为副作用，因为它们在房屋的构建过程中需要执行，但它们本身并不是房屋结构的组成部分。

React 中的副作用 Hook

React 中的副作用 Hook 与此类似。它们让你可以在组件的生命周期中执行额外的操作，这些操作可能包括：

修改 DOM
设置定时器
执行网络请求
进行状态管理

副作用 Hook 的生命周期

副作用 Hook 也有自己的生命周期，包括创建、执行和销毁阶段：

创建： 当组件挂载或更新时，React 创建副作用 Hook。

执行： 在组件渲染之后，根据副作用 Hook 的依赖数组判断是否需要执行。如果依赖数组发生了变化，则触发副作用的执行。

销毁： 当组件卸载时，React 销毁与该组件关联的所有副作用 Hook。

React 如何识别和管理副作用

React 依靠两个关键的标志位来识别和管理副作用：

fiber.flags：标记组件的各种状态和行为。
effect.tag：指示副作用的类型和状态。

副作用 Hook 的实现

副作用 Hook 的实现是 React 源码中最复杂的部分之一。它涉及以下关键步骤：

创建副作用对象
将副作用对象添加到组件的 Effect 链表中
更新组件的 fiber.flags 标志位
触发副作用的执行
在组件卸载时销毁副作用对象

示例：useState Hook

useState Hook 是 React 中最常用的副作用 Hook 之一。它用于管理组件的状态。以下是 useState Hook 的内部实现的简化示例：

function useState(initialValue) {
  const fiber = getFiber();
  let [state, setState] = fiber.memoizedState;

  if (!state) {
    state = initialValue;
    fiber.memoizedState = [state, setState];
  }

  function updateState(newState) {
    const newFiber = getFiber();
    newFiber.flags |= PerformedWork;
    newFiber.memoizedState = [newState, setState];
  }

  return [state, updateState];
}