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

与使用具有字段foo和bar的名为state的包罗万象的对象一次调用useState相比，这是允许和鼓励的吗？如果它是允许和鼓励的，那么useState如何知道无论何时调用它都是指已经存储的foo还是已经存储的bar？

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

Answer 1

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

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

参考文献：

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