时间戳

首页 > 解决方案 > 你可以在单个功能组件中多次调用 React 的 useState 和 useCallback 吗？如果是这样，它是如何工作的？

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

问题描述

我在 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的无所不包的对象调用一次？如果允许并鼓励它，如何知道它何时被调用是指已经存储还是已经存储？statefoobaruseStatefoobar

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

标签： reactjsreact-hooksusecallbackuse-state

解决方案

useState在你的渲染函数中使用多个是很好的。

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

参考：

推荐阅读