React Hooks 实现原理，实现一个简版React Hooks（闭包 Fiber 链表）

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview

完整高频题库阅读地址：https://febook.hzfe.org/

相关问题

• React Hooks 是什么
• React Hooks 是怎么实现的
• 使用 React Hooks 需要注意什么

回答关键点

闭包 Fiber 链表

Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hooks 主要是利用闭包来保存状态，使用链表保存一系列 Hooks，将链表中的第一个 Hook 与 Fiber 关联。在 Fiber 树更新时，就能从 Hooks 中计算出最终输出的状态和执行相关的副作用。

使用 Hooks 的注意事项：

• 不要在循环，条件或嵌套函数中调用 Hooks。
• 只在 React 函数中调用 Hooks。

知识点深入

1. 简化实现

React Hooks 模拟实现

该示例是一个 React Hooks 接口的简化模拟实现，可以实际运行观察。其中 react.js 文件模拟实现了 useState 和 useEffect 接口，其基本原理和 react 实际实现类似。

2. 对比分析

2.1 状态 Hook

模拟的 useState 实现中，通过闭包，将 state 保存在 memoizedState[cursor]。 memoizedState 是一个数组，可以按顺序保存 hook 多次调用产生的状态。

let memoizedState = [];
let cursor = 0;
function useState(initialValue) {
   
  // 初次调用时，传入的初始值作为 state，后续使用闭包中保存的 state
  let state = memoizedState[cursor] ?? initialValue;
  // 对游标进行闭包缓存，使得 setState 调用时，操作正确的对应状态
  const _cursor = cursor;
  const setState = (newValue) => (memoizedState[_cursor] = newValue);
  // 游标自增，为接下来调用的 hook 使用时，引用 memoizedState 中的新位置
  cursor += 1;
  return [state, setState];
}

实际的 useState 实现经过多方面的<