使用状态是同步的吗？

javascript reactjs react-hooks

2022-08-30 04:41:30

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

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

这如何使用钩子？据我所知，的 setter 函数不采用回调，例如useState

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

不会导致运行回调。

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

答案 1

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

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

只有在更新时才调用上述内容，并且您不应信任此函数内部的值，因为它可能不是最新的。useEffectstate1state2

如果你对创建的更新函数是否是同步的感到好奇，即如果 React 在使用钩子时批处理状态更新，这个答案提供了一些见解。useState

答案 2

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

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

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

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

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

setState(newState);

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

因此，您的新状态，无论它是什么，都是您刚刚设置的，即的值。它直接转到，此后被动更新。进一步引用相关文档：useStateinitialStatestate

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

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