可以在单个功能组件中多次调用 React 的 useState 和 useCallback 吗？如果是这样，它是如何运作的？

Question

我在 React 官方文档或 blagosphere 上还没有找到任何提及这一点的信息。

我认为当你有多个状态变量时你可以而且通常应该做这样的事情：

function MyComponent() {
  const [foo, setFoo] = useState(0);
  const [bar, setBar] = useState(1);

  return (
    <div>
      <div onClick={() => setFoo(foo+1)}>{foo}</div>
      <div onClick={() => setBar(bar+1)}>{bar}</div>
    </div>
  );
}

是否允许并鼓励这样做，而不是使用useState一个包含state字段foo和的包罗万象的对象来调用一次bar？如果允许并鼓励这样做，那么useState每次调用时如何知道它是指已存储的foo还是已存储的bar？

我也有基本相同的问题useCallback。我想知道，如果我useCallback在同一个组件中调用两次以创建两个不同的回调，如何知道useCallback我要引用之前定义的函数与创建新函数，并且如果引用已使用的函数，则需要返回记忆的函数的版本，它如何知道两者中的哪一个？特别是如果两个回调具有相同的依赖项列表？

Answer 1

useState在渲染函数中使用多个是可以的。

一项重要要求是它们的数量和顺序应始终相同。

参考：

• https://reactjs.org/docs/hooks-rules.html#explanation