useState 是同步的吗？ [复制]

Question

过去，我们已经明确警告过，调用 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）。

Answer 1

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

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

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

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

Answer 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)