useState是同步的吗？

Question

过去，我们曾明确警告过调用setState({myProperty})是异步的，并且this.state.myProperty直到回调或下一个render()方法才有效。

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

钩子如何工作？据我所知，setter函数useState不接受回调，例如

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在使用钩子时对状态更新进行批处理，则此答案可以为您提供一些见解。

Answer 2

好吧，如果您参考相关文档，您会发现......

\n\n

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

\n\n

\n

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

\n\n

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

\n\n

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

\n

\n\n

setState(newState);\n

\n\n

\n

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

\n

\n\n

所以你的新状态，无论它是什么，都是你刚刚在 中设置的useState，即 的值initialState。它直接转到state，此后会进行反应式更新。进一步引用相关文档：

\n\n

\n

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

\n

\n\n

如果您想在状态更新时执行某些操作，则只需使用componentDidUpdate. ^（文档）

\n