useState 的原理及模拟实现 —— React Hooks

基本用法

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

原理

按照 React 16.8.0 版本之前的机制，我们知道如果某个组件是函数组件，则这个 function 就相当于 Class 组件中的 render() ，不能拥有自己的状态（故又称其为无状态组件，stateless components），所以数据（输入）必须是来自父组件的 props 。而在 >=16.8.0 中，函数组件支持通过使用 Hooks 来为其引入 state 的能力，例如上面所展示的例子：这个 App 组件提供了一个按钮，每次点击这个都会执行 setCount 使得 count 增加 1 ，并更新在视图上。

为了更直观地看到使用了 Hooks 的函数组件和 Class 组件的区别，我写了一个对比示例。 A 是使用了 Hooks 的函数组件， B 是我们熟悉的 Class 组件。当我们分别点击两个按钮更新数据时，我们已知 B 组件不会重新调用而是在 setState 通知变化之后重新渲染（render），而 A 组件是如何处理更新的呢？让我们来分析一下这个过程：

• A. 点击按钮「A+1」

  1. 按钮「A+1」的 click 事件触发，执行异步的 setCount(count + 1)
  2. 开启定时器，将在一秒之后执行回调函数 () => logNewValueAfterOneSecond('A', count)
  3. 按钮「A+1」的 click 事件执行到结尾，异步 setCount 起效，输出“A’s count: 1”， <span>0</span> 更新为 <span>1</span> （只更新 span 的文本）
  4. 一秒到了，定时器的回调函数执行，输出“1 second later, A’s count: 0”

• B. 点击按钮「B+1」

  1. 按钮「B+1」的 click 事件触发，执行异步的 this.setState(state => ({ count: state.count + 1 }))
  2. 开启定时器，将在一秒之后执行回调函数 () => logNewValueAfterOneSecond('B', this.state.count)
  3. 按钮「B+1」的 click 事件执行到结尾，异步 setState 起效，输出“B’s count: 1”且 <span>0</span> 更新为 <span>1</span> （只更新 span 的文本）
  4. 一秒到了，定时器的回调函数执行，输出“1 second later, B’s count: 1”

通过上面的步骤分析，我们可以看到，有区别的就是步骤 1、4 。先说说 B ——在 B.1 中 setState 通知变化后， React 不会立即更新组件，而是会延迟调用它，到了步骤 3 时 React 对 state 的变更才真正生效（类似于 Object.assign(previousState, {count: state.count + 1})）， this.state.count 的值更新为 1 ，且由于 shouldComponentUpdate() 默认返回 true ，所以成功触发新的一次渲染，于是组件 B 的 DOM 更新（不清楚组件更新过程的同学可以戳这里补功课，重点放在生命周期和setState两个模块）。整个过程没有重新生成这个组件实例，它们始终在同一个环境，所以一秒后输出 B 的 count 是 1 ，而 A ：

1. 首先， A 中的 count 和 setCount 是由钩子函数 useState() 返回的两个值。
2. count 的初始值是 0 ，与我们赋予的一样。
3. 上面我说到，函数组件相当于 Class 组件中的 render() ，所以我们大胆假设在按钮第一次点击异步执行 setCount(count + 1) 之后，重新 render ，即 A() 被重新调用，此时 count 从 useState() 中再次获取到的值更新为 1 ，返回的值通过 diff 最终局部更新。

但是奇怪的是，为什么一秒之后定时器回调函数执行后输出的 count 是旧的值呢？请大家再看一遍 3 ，「A() 被重新调用」，「count 从 useState() 中再次获取值」，那么此时的 count 还为彼时的 count 吗？答案当然是「不」！它们已经是存在于不同环境的两个变量了。
假设 2 中的 count 是 count0（值为0），而 3 中的 count 是 count1（值为1）。定时器是什么时候设定的？在第一次点击按钮时。这个时候 logNewValueAfterOneSecond() 传入的 count 实际上是还没有更新的 count0 ，一秒之后，虽然 count 已更新为 count1 ，但 logNewValueAfterOneSecond() 调用的 count 并没有更新，还是之前的 count0 ，所以必然输出 0 。
这下看起来明了了一些吗？接下来我们来尝试模拟实现一下 useState() 吧～

模拟实现

React.useState() 里都做了些什么：

1. 将初始值赋给一个变量我们称之为 state
2. 返回这个变量 state 以及改变这个 state 的回调函数我们称之为 setState
3. 当 setState() 被调用时， state 被其传入的新值重新赋值，并且更新根视图

function useState(initialState) {
  let _state = initialState;
  const setState = (newState) => {
    _state = newState;
    ReactDOM.render(<App />, rootElement);
  };
  return [_state, setState];
}

4. 每次更新时，函数组件会被重新调用，也就是说 useState() 会被重新调用，为了使 state 的新值被记录（而不是一直被重新赋上 initialState），需要将其提到外部作用域声明

let _state;
function useState(initialState) {
   _state = _state === undefined ? initialState : _state;
   const setState = (newState) => {
     _state = newState;
     ReactDOM.render(<App />, rootElement);
   };
   return [_state, setState];
}

好的，现在让我们来调用一下，目前暂时是达到了 React.useState() 一样的效果。Open in CodeSandbox

模拟 React.useState 1.0

5. 但是，如果添加多个 useState() ，就一定会出现 BUG 了。因为当前的 _state 只能存放一个单一变量。如果我将 _state 改成数组存储呢？让这个数组 _state 根据当前操作 useState() 的索引向内添加 state

let _state = [], _index = 0;
function useState(initialState) {
  let curIndex = _index; // 记录当前操作的索引
  _state[curIndex] = _state[curIndex] === undefined ? initialState : _state[curIndex];
  const setState = (newState) => {
    _state[curIndex] = newState;
    ReactDOM.render(<App />, rootElement);
    _index = 0; // 每更新一次都需要将_index归零，才不会不断重复增加_state
  }
  _index += 1; // 下一个操作的索引
  return [_state[curIndex], setState];
}

虽然通过使用数组存储 _state 成功模拟了多个 useState() 的情况（Open in CodeSandbox），但这要求我们保证 useState() 的调用顺序，所以我们不能在循环、条件或嵌套函数中调用 useState() ，这在 React.useState() 同样要求，官网还给出了专门的解释。

6. 让我们的 setState() 也支持函数式更新和惰性初始state：Open in CodeSandbox

7. 通过 Object.is() 比较算法来判断 _state 是否需要更新：Open in CodeSandbox

至此，我的模拟实现已结束。而实际上， React 并不是真的是这样实现的。上面提到的 _state 其实对应 React 的 memoizedState ，而 _index 实际上是利用了链表。有兴趣的同学可以自己去读源码或者参阅这篇博客。

总结

const [state, setState] = React.useState(initialState);

• React 16.8.0 正式增加了 Hooks ，它为函数组件引入了 state 的能力，换句话说就是使函数组件拥有了 Class 组件的功能。
• React.useState() 返回的第二个参数 setState 用于更新 state ，并且会触发新的渲染。同时，在后续新的渲染中 React.useState() 返回的第一个 state 值始终是最新的。
• 为了保证 memoizedState 的顺序与 React.useState() 正确对应，我们需要保证 Hooks 在最顶层调用，也就是不能在循环、条件或嵌套函数中调用。
• React.useState() 通过 Object.is() 来判断 memoizedState 是否需要更新。

---

参考资料：

• Hooks API Reference - useState
• Rules of Hooks
• Introducing Hooks
• 阅读源码后，来讲讲React Hooks是怎么实现的 - Jokcy

以上 React 的参考资料的中文版直接在前面加“zh-hans.”即可，即 https://zh-hans.reactjs.org/… ，不过似乎要翻墙才可以😂

---

本文正在参加“写编程博客瓜分千元现金”活动，关注公众号“饥人谷”回复“编程博客”参与活动。