useState hook中setStateVariable函数的实现细节

Question

我们知道useState是FC中的hook，returns一个数组由两个元素组成。第一个是状态变量，第二个是更新状态变量的函数。

const initialStateVariableValue = 0; // any primitive value
const [StateVariable, setStateVariable] = useState(initialStateVariableValue);

这里我想知道setStateVariable函数的实现细节是什么？它是如何更新状态变量的？

Answer 1

如果你检查 React github 上的实现，你会注意到 useState 只是用基本的 reducer 调用 useReducer：

export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return useReducer(
    basicStateReducer,
    (initialState: any),
  );
}

所以寻找 useReducer 实现，我们看到 setter 函数是 dispatch 函数，它根据我们当前的生命周期而变化

export function useReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  ...
    // dispatch depends on lifecycle
    return [..., dispatch];
  }
}

您可以看到完整的 useReducer 实现 here。

对于详细的实现，你应该尝试 Build your own React 这最终会导致这个钩子的简化版本：

function useState(initial) {
  const oldHook =
    wipFiber.alternate &&
    wipFiber.alternate.hooks &&
    wipFiber.alternate.hooks[hookIndex];
  const hook = {
    state: oldHook ? oldHook.state : initial,
    queue: []
  };

  const actions = oldHook ? oldHook.queue : [];
  actions.forEach(action => {
    hook.state = action(hook.state);
  });

  const setState = action => {
    hook.queue.push(action);
    wipRoot = {
      dom: currentRoot.dom,
      props: currentRoot.props,
      alternate: currentRoot
    };
    nextUnitOfWork = wipRoot;
    deletions = [];
  };

  wipFiber.hooks.push(hook);
  hookIndex++;
  return [hook.state, setState];
}

简单来说：每个钩子都保存在“React hooks 数组”中（这就是调用顺序必不可少的原因，因为钩子保存在数组的索引中 - 请参阅钩子规则），并且取决于钩子的索引，无论何时调用它改变与当前组件关联的状态对象。

useState hook中setStateVariable函数的实现细节

Implementation details of setStateVariable function in useState hook

reactjs

use-state