关于 useState 的一切

小灰灰 2022-12-02 15:28 202阅读 0赞

作为`React`开发者，你能回答如下两个问题么：

1.  对于如下函数组件：

function App() {
      const [num, updateNum] = useState(0);
      window.updateNum = updateNum;
      return num;
    }

调用`window.updateNum(1)`可以将视图中的`0`更新为`1`么？

1.  对于如下函数组件：

function App() {
      const [num, updateNum] = useState(0);
      
      function increment() {
        setTimeout(() => {
          updateNum(num + 1);
        }, 1000);
      }
      
      return <p onClick={increment}>{num}</p>;
    }

在1秒内快速点击`p`5次，视图上显示为几？

????向右滑动展示答案                                             1. 可以
                                                                2. 显示为1

其实，这两个问题本质上是在问：

*  `useState`如何保存状态？
 *  `useState`如何更新状态？

本文会结合源码，讲透如上两个问题。

这些，就是你需要了解的关于`useState`的一切。

## hook如何保存数据 ##

`FunctionComponent`的`render`本身只是函数调用。

那么在`render`内部调用的`hook`是如何获取到对应数据呢？

比如：

*  `useState`获取`state`
 *  `useRef`获取`ref`
 *  `useMemo`获取缓存的数据

答案是：

每个组件有个对应的`fiber节点`（可以理解为`虚拟DOM`），用于保存组件相关信息。

每次`FunctionComponent` `render`时，全局变量`currentlyRenderingFiber`都会被赋值为该`FunctionComponent`对应的`fiber节点`。

所以，`hook`内部其实是从`currentlyRenderingFiber`中获取状态信息的。

## 多个hook如何获取数据 ##

我们知道，一个`FunctionComponent`中可能存在多个`hook`，比如：

function App() {
      // hookA
      const [a, updateA] = useState(0);
      // hookB
      const [b, updateB] = useState(0);
      // hookC
      const ref = useRef(0);
      
      return <p></p>;
    }

那么多个`hook`如何获取自己的数据呢？

答案是：

`currentlyRenderingFiber.memoizedState`中保存一条`hook`对应数据的单向链表。

对于如上例子，可以理解为：

const hookA = {
      // hook保存的数据
      memoizedState: null,
      // 指向下一个hook
      next: hookB
      // ...省略其他字段
    };
    
    hookB.next = hookC;
    
    currentlyRenderingFiber.memoizedState = hookA;

当`FunctionComponent` `render`时，每执行到一个`hook`，都会将指向`currentlyRenderingFiber.memoizedState`链表的指针向后移动一次，指向当前`hook`对应数据。

这也是为什么`React`要求`hook`的调用顺序不能改变（不能在条件语句中使用`hook`） —— 每次`render`时都是从一条固定顺序的链表中获取`hook`对应数据的。

![format_png][]

## useState执行流程 ##

我们知道，`useState`返回值数组第二个参数为**改变state的方法**。

在源码中，他被称为`dispatchAction`。

每当调用`dispatchAction`，都会创建一个代表一次更新的对象`update`：

const update = {
      // 更新的数据
      action: action,
      // 指向下一个更新
      next: null
    };

对于如下例子

function App() {
      const [num, updateNum] = useState(0);
      
      function increment() {
        updateNum(num + 1);
      }
      
      return <p onClick={increment}>{num}</p>;
    }

调用`updateNum(num + 1)`，会创建：

const update = {
      // 更新的数据
      action: 1,
      // 指向下一个更新
      next: null
      // ...省略其他字段
    };

如果是多次调用`dispatchAction`，例如：

function increment() {
      // 产生update1
      updateNum(num + 1);
      // 产生update2
      updateNum(num + 2);
      // 产生update3
      updateNum(num + 3);
    }

那么，`update`会形成一条环状链表。

update3 --next--> update1
      ^                 |
      |               update2
      |______next_______|

这条链表保存在哪里呢？

既然这条`update`链表是由某个`useState`的`dispatchAction`产生，那么这条链表显然属于该`useState hook`。

我们继续补充`hook`的数据结构。

const hook = {
      // hook保存的数据
      memoizedState: null,
      // 指向下一个hook
      next: hookForB
      // 本次更新以baseState为基础计算新的state
      baseState: null,
      // 本次更新开始时已有的update队列
      baseQueue: null,
      // 本次更新需要增加的update队列
      queue: null,
    };

其中，`queue`中保存了本次更新`update`的链表。

在计算`state`时，会将`queue`的环状链表剪开挂载在`baseQueue`最后面，`baseQueue`基于`baseState`计算新的`state`。

在计算`state`完成后，新的`state`会成为`memoizedState`。

![format_png 1][]

> 为什么更新不基于`memoizedState`而是`baseState`，是因为`state`的计算过程需要考虑优先级，可能有些`update`优先级不够被跳过。所以`memoizedState`并不一定和`baseState`相同。更详细的解释见React技术揭秘\[1\]

回到我们开篇第一个问题：

function App() {
      const [num, updateNum] = useState(0);
      window.updateNum = updateNum;
      return num;
    }

调用`window.updateNum(1)`可以将视图中的`0`更新为`1`么？

我们需要看看这里的`updateNum`方法的具体实现：

updateNum === dispatchAction.bind(null, currentlyRenderingFiber, queue);

可见，`updateNum`方法即绑定了`currentlyRenderingFiber`与`queue`（即`hook.queue`）的`dispatchAction`。

上文已经介绍，调用`dispatchAction`的目的是生成`update`，并插入到`hook.queue`链表中。

既然`queue`作为预置参数已经绑定给`dispatchAction`，那么调用`dispatchAction`就不仅局限在`FunctionComponent`内部了。

## update的action ##

第二个问题

在1秒内快速点击`p`5次，视图上显示为几？

我们知道，调用`updateNum`会产生`update`，其中传参会成为`update.action`。

在1秒内点击5次。在点击第五次时，第一次点击创建的`update`还没进入更新流程，所以`hook.baseState`还未改变。

那么这5次点击产生的`update`都是基于同一个`baseState`计算新的`state`，并且`num`变量也还未变化（即5次`update.action`（即`num + 1`）为同一个值）。

所以，最终渲染的结果为1。

## useState与useReducer ##

那么，如何5次点击让视图从1逐步变为5呢？

由以上知识我们知道，需要改变`baseState`或者`action`。

其中`baseState`由`React`的更新流程决定，我们无法控制。

但是我们可以控制`action`。

`action`不仅可以传`值`，也可以传`函数`。

// action为值
    updateNum(num + 1);
    // action为函数
    updateNum(num => num + 1);

在基于`baseState`与`update`链表生成新`state`的过程中：

let newState = baseState;
    let firstUpdate = hook.baseQueue.next;
    let update = firstUpdate;
    
    // 遍历baseQueue中的每一个update
    do {
      if (typeof update.action === 'function') {
        newState = update.action(newState);
      } else {
        newState = action;
      }
    } while (update !== firstUpdate)

可见，当传`值`时，由于我们5次`action`为同一个值，所以最终计算的`newState`也为同一个值。

而传`函数`时，`newState`基于`action`函数计算5次，则最终得到累加的结果。

如果这个例子中，我们使用`useReducer`而不是`useState`，由于`useReducer`的`action`始终为`函数`，所以不会遇到我们例子中的问题。

事实上，`useState`本身就是预置了如下`reducer`的`useReducer`。

function basicStateReducer(state, action) {
      return typeof action === 'function' ? action(state) : action;
    }

## 总结 ##

通过本文，我们了解了`useState`的完整执行过程。

本系列文章接下来会继续以`实例` \+ `源码`的方式，解读业务中经常使用的`React`特性。

> 点击`阅读原文`，开源电子书轻松学懂`React`源码

### 参考资料 ###

\[1\]

React技术揭秘: *https://react.iamkasong.com/state/priority.html\#%E4%BB%80%E4%B9%88%E6%98%AF%E4%BC%98%E5%85%88%E7%BA%A7*