为什么React Hooks中的useState要按顺序执行？

前端

2023-10-29 13:25:40

序言

React Hooks是React 16.8版本中引入的一项重大更新，它允许开发者在函数式组件中使用状态和生命周期方法。其中，useState是使用最广泛的Hooks之一，它允许开发者在函数式组件中管理状态。

然而，useState有一个需要注意的地方，那就是它必须按顺序执行。这意味着，在同一个函数式组件中，useState的调用顺序不能被打乱。否则，可能会导致意外的行为和错误。

那么，为什么useState必须按顺序执行呢？这背后有什么原理和原因呢？本文将通过对useState的源码分析，详细解释为什么useState必须按顺序执行，以及如何利用useState的顺序执行来优化React应用的性能。

useState的源码分析

为了理解为什么useState必须按顺序执行，我们首先需要了解useState的内部是如何工作的。

useState的源码位于React的源码库中，具体位置在react-dom/cjs/react-dom.development.js文件中。

export function useState(initialState) {
  const hook = mountState(FiberCurrentDispatcher.current, null, null);
  const memoizedState = hook.memoizedState;
  let result = memoizedState;
  if (enableSchedulingProfiler) {
    if (hook.queue !== null) {
      hook.queue.lastBaseUpdate =
        hook.queue.baseState = memoizedState;
    }
  }
  if (typeof initialState === 'function') {
    initialState = initialState();
  }
  hook.memoizedState = result = [
    typeof initialState === 'function' ? initialState() : initialState,
    dispatchAction,
  ];
  hook.queue = useReducer(null, null, null, updateReducer);
  return result;
}

从useState的源码中，我们可以看到，useState的内部主要做了以下几件事：

调用mountState函数创建一个新的Hook对象。
将新的Hook对象添加到当前Fiber的Hooks链表中。
初始化Hook对象的状态值。
返回Hook对象的状态值和一个更新状态的函数。

其中，mountState函数是useState的核心函数，它负责创建新的Hook对象。在mountState函数中，会根据当前Fiber的Hooks链表来确定新的Hook对象应该放在哪个位置。

如果当前Fiber的Hooks链表为空，则新的Hook对象将被放在链表的头部。否则，新的Hook对象将被放在链表的尾部。

这就是useState必须按顺序执行的原因。因为useState的内部实现依赖于当前Fiber的Hooks链表。如果useState的调用顺序被打乱，则会导致新的Hook对象被放在错误的位置，从而导致意外的行为和错误。

useState的顺序执行与性能优化

useState的顺序执行除了保证代码的正确性之外，还可以帮助我们优化React应用的性能。

当我们调用useState时，React会创建一个新的Hook对象并将其添加到当前Fiber的Hooks链表中。这个过程需要一定的计算和内存开销。

如果我们可以在一个函数式组件中按顺序调用useState，那么React就可以复用之前的Hook对象，从而减少计算和内存开销。

例如，以下代码按顺序调用了两个useState：

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
    </div>
  );
};