useState 是同步的吗？ [复制]

Posted 2023-02-14

【中文标题】useState 是同步的吗？ [复制]

【英文标题】：Is useState synchronous? [duplicate]

【发布时间】：2019-06-04 18:59:26

【问题描述】：

过去，我们已经明确警告过，调用 setState(myProperty) 是异步的，this.state.myProperty 的值在回调之前或在下一个 render() 方法之前无效。

使用useState，如何在显式更新后获取状态的值？

这如何与钩子一起使用？据我所知，useState 的 setter 函数不接受回调，例如

const [value, setValue] = useState(0);
setValue(42, () => console.log('hi callback');

不会导致回调正在运行。

我在旧世界的另一个解决方法是在类上挂一个实例变量(e.g. this.otherProperty = 42)，但这在这里不起作用，因为没有函数实例可以重用（在严格模式下没有this）。

【问题讨论】：

带有钩子 (useEffect) 和传递当前状态变量的可能性 - 你的用例是什么让“当你完成更新状态时告诉我”？跨度>

您可以将 useState 与回调函数一起使用。默认情况下不提供，但这个自定义钩子有帮助：github.com/the-road-to-learn-react/use-state-with-callback

useState 的 setter 函数确实会按照此处的说明进行回调：reactjs.org/docs/hooks-reference.html#functional-updates 此问题是在此功能可用之前发布的还是什么

【参考方案1】：

您可以使用useEffect 访问更新后的最新状态。如果您有多个状态挂钩，并且只想跟踪其中一部分的更新，您可以将状态作为useEffect 函数的第二个参数传入数组中：

useEffect(() =>  console.log(state1, state2), [state1])

上面的useEffect 只会在state1 更新时被调用，你不应该相信这个函数内部的state2 值，因为它可能不是最新的。

如果你好奇useState 创建的更新函数是否是同步的，即如果 React 在使用钩子时批量更新状态，this answer 提供一些见解。

【讨论】：

这对我的情况没有帮助 - state1 可以被多个事件更改，我不知道哪个事件触发了状态更改。非常感谢旧语法await setState(...)。

请注意，如果您在您的状态下使用对象或数组，您需要在 useEffect 的第二个数组参数中进行设置，例如useEffect(() => ..., [state.prop])

我需要在 onPress 函数中执行此操作。但是，useEffect 只能在函数组件的主体中调用。还有其他解决方案吗？

是的 b/c 这个新的反应钩子增加了更多的问题。反应 15 更好恕我直言

【参考方案2】：

好吧，如果你参考相关的docs你会发现......

const [state, setState] = useState(initialState);

返回一个有状态的值，以及一个更新它的函数。

在初始渲染期间，返回的状态（state）与作为第一个参数（initialState）传递的值相同。

setState 函数用于更新状态。它接受一个新的状态值并将组件的重新渲染排入队列。

setState(newState);

在后续重新渲染期间，useState 返回的第一个值将始终是应用更新后的最新状态。

所以你的新状态，不管它是什么，都是你刚刚在useState 中设置的，即initialState 的值。它直接转到state，之后会响应更新。进一步引用相关docs：

调用 useState 有什么作用？它声明了一个“状态变量”。我们的变量称为 count 但我们可以将其称为其他任何名称，例如香蕉。这是一种在函数调用之间“保留”一些值的方法——useState 是一种使用与 this.state 在类中提供的完全相同的功能的新方法。通常，当函数退出时，变量会“消失”，但状态变量会被 React 保留。

如果您想在状态更新时做某事，那么只需使用componentDidUpdate。^(docs)

【讨论】：

如果 OP 已经在使用钩子，他最好不要像其他回答者指出的那样使用 useEffect。

如果 React Hooks 在 2 月 6 日发布了 16.8，那么 Claire Lin 是如何在 1 月 10 日引用 Hooks 的？

在 2 月 6 日，钩子在稳定版本中可用，尽管几个月前很多人已经在生产中使用它们。