无法理解React setState签名“ setState（updater [，callback]）”

Question

我知道这可能是JavaScript问题，而不是React问题，但我无法理解上述React setState的签名。

函数参数列表中的方括号和逗号是什么？

我知道如何在更新程序中使用它，但是如何在回调中使用它，这又是什么语法？

Answer 1

如果只想更新状态，则可以使用setState({ key: 'value' })

如果您想在更新后立即对更新后的状态执行操作，则可以运行setState({ key: 'value' }, () => callback())或setState({ key: 'value' }, callback)

回调函数应为 React类组件中的callback() { }或callback = () => { }

回调函数将在更新状态后运行。

注意：我们使用回调，因为setState使用一些微秒来更新状态，并且下一行将在更新状态之前运行。然后我们传递在更新状态后运行的回调。

Answer 2

  

函数参数列表中的方括号和逗号是什么？

这仅表示传递第二个参数是可选的。 （这是JavaScript和其他语言中非常常见的符号。）您可以像这样调用setState：

this.setState(newStateOrUpdaterFunction);

或类似这样：

this.setState(newStateOrUpdaterFunction, callbackFunction);

在第二种情况下，状态更新完成后，React将调用callbackFunction。有时因为state updates are asynchronous。这很有用。

要传递第二个参数相对很少。通常，您只想在更新状态后重新渲染，React会通过调用render函数来自动进行渲染。

Answer 3

这是一个可选参数。

您可以通过以下方式使用它：

setState( updater, () => { AfterAllSetstateDone_doSomeActionHere; } );

该回调用于通知何时处理所有setState调用。

但这是可选的，因为您宁愿使用componentDidUpdate() { someActionHere }生命周期挂钩来处理已满的setState调用。