useState是同步的吗？[副本]

Question

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

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

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

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

不会导致正在运行回调。

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

Answer 1

嗯，如果你查阅相关文件，你会发现。。。

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

返回有状态值和更新该值的函数。

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

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

setState(newState);

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

因此，您的新状态，无论它是什么，都是您刚刚在useState中设置的，即初始状态的值。它直接进入state，之后会进行响应式更新。进一步引用相关文件：

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

如果您想在状态更新时执行某些操作，那么只需使用componentdiddupdate^（docs）

Answer 2

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

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

仅当更新了state1时，才会调用上述useffect，您不应该信任此函数中的state2值，因为它可能不是最新的值。

如果您想知道由useState创建的更新函数是否是同步的，也就是说，如果在使用钩子时更新了状态，那么这个答案可以提供一些深入了解。