我知道调用setState方法意味着我不必手动调用ReactDOM.render方法。下面是一些示例代码:
...
render() {
return (
<button onClick={this.handleClick}>
Click
</button>
)
}
handleClick = () => {
this.setState({ counter: this.state.counter + 1 }, () => this.setState({ hasButtonBeenClicked: this.state.counter > 0 }));
this.props.callback();
}
由于在this.props.callback();
方法下面还有另一个语句this.setState()
,所以ReactDOM.render方法在this.props.callback();
之前还是之后被调用?
答案 0 :(得分:4)
由于在
this.props.callback();
方法下面还有另一个语句this.setState()
,所以ReactDOM.render
方法在this.props.callback();
之前还是之后被调用?
之后,就您而言。如果在React事件处理程序中调用render
,则状态更新和对setState
的调用是异步的(即使不是more here,也可能是异步的)。序列(在React事件处理程序中)是:
setState
。this.props.callback();
shouldComponentUpdate
的信息。) render
使其呈现当前状态。如果要在呈现新状态后调用this.props.callback();
,请将其放在函数中作为setState
的第二个参数:
handleClick = () => {
this.setState(
{ counter: this.state.counter + 1 },
() => {
this.props.callback();
}
);
}
或
handleClick = () => {
this.setState(
{ counter: this.state.counter + 1 },
this.props.callback
);
}
...如果this.props.callback
不在乎您用什么来称呼this
。
更多信息在这里:
setState
API docs 答案 1 :(得分:1)
如果查看我的代码示例,则状态更新后会立即调用this.props.callback()。
handleClick = () => {
this.setState({ counter: this.state.counter + 1, hasButtonBeenClicked: true }, () => this.props.callback() );
}
您已经链接了setState,这对于可读性来说似乎是不必要的。这些应该自动分组为一个setState调用,但是其中一个嵌套在回调中,这将触发多个重新渲染。.取决于ShouldComponentUpdate。
为了避免猜测或使其易于将来的React更新: 将setState回调用于this.props.callback是确保setState完成后执行它的最佳方法。
根据T.J Crowders的反馈和对事件处理程序的研究进行了更新: 代码的结构方式最有可能在setState实际完成状态更新之前调用this.props.callback,一旦状态更新,它将触发重新渲染。
-因为它在异步调用中,并且在React事件处理程序中。 SetState应该在之后更新状态。(我仍然不是Promise的专家,并且不得不怀疑状态是否有可能在毫秒内更新的机会,具体取决于您的浏览器内部时钟和批处理)
为清楚起见,对其他人。本示例是异步的,这意味着代码在等待解决的同时继续执行。虽然setState返回一个承诺。在这种情况下,它应该绝对继续处理this.props.callback(),直到兑现承诺为止。
答案 2 :(得分:-1)
setState是一个异步方法,因此在您提供的示例代码中,不能保证在this.props.callback()
调用之前还是之后都将调用setState
。结果,也不能保证ReactDOM.render调用是在this.props.callback()
之前还是之后。
如果希望仅在setState和ReactDOM.render调用之后执行this.props.callback()
,则将其作为setState调用的回调参数传递:setState(updater[, callback])