useState 的原理及模拟实现 —— React Hooks 系列（一）

南易_站长

阅读量：29999

useState 的原理及模拟实现 —— React Hooks 系列（一）

## **基本用法**

```js
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](https://link.zhihu.com/?target=https%3A//reactjs.org/docs/hooks-intro.html) 来为其引入 state 的能力，例如上面所展示的例子：这个 `App` 组件提供了一个按钮，每次点击这个都会执行 `setCount` 使得 `count` 增加 1 ，并更新在视图上。

为了更直观地看到使用了 Hooks 的函数组件和 Class 组件的区别，我写了一个[对比示例](https://link.zhihu.com/?target=https%3A//codesandbox.io/embed/pedantic-grothendieck-bmqgz%3Ffontsize%3D14%26hidenavigation%3D1%26theme%3Ddark)。 `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*”

![null](https://pic2.zhimg.com/v2-2423e76e48211882ce432b9777b34655_b.jpg)

Hooks 的函数组件 vs Class 组件

通过上面的步骤分析，我们可以看到，有区别的就是步骤 **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 更新（不清楚组件更新过程的同学可以戳[这里](https://link.zhihu.com/?target=https%3A//reactjs.org/docs/react-component.html)补功课，重点放在[生命周期](https://link.zhihu.com/?target=https%3A//zh-hans.reactjs.org/docs/react-component.html%23the-component-lifecycle)和[setState](https://link.zhihu.com/?target=https%3A//zh-hans.reactjs.org/docs/react-component.html%23setstate)两个模块）。整个过程没有重新生成这个组件实例，它们始终在同一个环境，所以一秒后输出 `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` 被其传入的新值重新赋值，并且更新根视图

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

```

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

```js
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](https://link.zhihu.com/?target=https%3A//codesandbox.io/s/elegant-dust-5x1oc%3Ffontsize%3D14%26hidenavigation%3D1%26theme%3Ddark)

![null](https://pic1.zhimg.com/v2-2d81fa2039b7858f259495acdcc29528_b.jpg)

初步useState

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

```js
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](https://link.zhihu.com/?target=https%3A//codesandbox.io/s/frosty-flower-9i1y7)），但这要求我们保证 `useState()` 的调用顺序，所以我们不能在循环、条件或嵌套函数中调用 `useState()` ，这在 `React.useState()` 同样要求，官网还给出了专门的[解释](https://link.zhihu.com/?target=https%3A//reactjs.org/docs/hooks-rules.html%23explanation)。

6. 让我们的 `setState()` 也支持[函数式更新](https://link.zhihu.com/?target=https%3A//reactjs.org/docs/hooks-reference.html%23functional-updates)和[惰性初始state](https://link.zhihu.com/?target=https%3A//reactjs.org/docs/hooks-reference.html%23lazy-initial-state)：[Open in CodeSandbox](https://link.zhihu.com/?target=https%3A//codesandbox.io/s/pedantic-flower-cbyfg)

7. 通过 `[Object.is()](https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)` 比较算法来判断 `_state` 是否需要更新：[Open in CodeSandbox](https://link.zhihu.com/?target=https%3A//codesandbox.io/s/bold-fire-jv9y7)

```js
Object.is(_state[curIndex], newState)

```

至此，我的模拟实现已结束。而实际上， React 并不是真的是这样实现的。上面提到的 `_state` 其实对应 React 的 `memoizedState` ，而 `_index` 实际上是利用了链表。有兴趣的同学可以自己去读[源码](https://link.zhihu.com/?target=https%3A//github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberHooks.js)或者参阅这篇[博客](https://link.zhihu.com/?target=https%3A//juejin.im/post/5bdfc1c4e51d4539f4178e1f)。

## **总结**

```js
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()](https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)` 来判断 `memoizedState` 是否需要更新。

表情

登录

注册

南易_站长

阅读量：29999

useState 的原理及模拟实现 —— React Hooks 系列（一）

评论