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，将会发现...

insert(Key, Value)

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

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

setState函数用于更新状态。它接受一个新的状态值并排队重新呈现该组件。

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

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

因此，无论状态如何，您的新状态就是您刚刚在setState(newState);中设置的状态，即useState的值。它直接进入initialState，此后将进行反应性更新。进一步引用相关的docs：

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

如果您希望在状态更新时执行某些操作，则只需使用state。^(docs)

useState是同步的吗？

2 个答案: