javascript - useState 是同步的吗？

Question

这个问题已经有答案了:

The useState set method is not reflecting a change immediately (17 个回答)

已关闭 4 年前。

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

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

这如何与钩子(Hook)一起工作？据我所知， useState 的 setter 函数不接受回调，例如

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

不会导致回调运行。

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

Answer 1

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

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

上面的 useEffect 仅在 state1 更新时才会被调用，并且您不应该信任此函数内部的 state2 值，因为它可能不是最新的。

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