你能在一个功能组件中多次调用 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>
  );
}

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

关于useCallback我也有基本相同的问题。我想知道，如果我在同一个组件中两次调用 useCallback 来创建两个不同的回调，useCallback 如何知道我打算引用一个在创建新函数之前定义的函数，如果引用一个已经使用过的函数需要 return 的记忆版本，它怎么知道两者中的哪一个？特别是如果两个回调具有相同的依赖列表？

Answer 1

在渲染函数中使用多个 useState 没问题。

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

参考文献：

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

你能在一个功能组件中多次调用 React 的 useState 和 useCallback 吗？如果是这样，它是如何工作的？

Can you call React's useState and useCallback multiple times in a single functional component? If so, how does it work?

reactjs

react-hooks

usecallback

use-state