Question

我知道调用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();之前还是之后被调用？

Answer 1

由于在this.props.callback();方法下面还有另一个语句this.setState()，所以ReactDOM.render方法在this.props.callback();之前还是之后被调用？

之后，就您而言。如果在React事件处理程序中调用render，则状态更新和对setState的调用是异步的（即使不是more here，也可能是异步的）。序列（在React事件处理程序中）是：

您通过状态更新呼叫setState。
您致电this.props.callback();
React处理状态更新（可能将其与其他挂起的更新合并）。
（一些有关shouldComponentUpdate的信息。）
React调用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。

更多信息在这里：

State Updates May Be Asynchronous （该标题让我很生气，因为不是它们可能是异步的，不是因为它们是异步的）
setState API docs

Answer 2

如果查看我的代码示例，则状态更新后会立即调用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（），直到兑现承诺为止。

Answer 3

setState是一个异步方法，因此在您提供的示例代码中，不能保证在this.props.callback()调用之前还是之后都将调用setState。结果，也不能保证ReactDOM.render调用是在this.props.callback()之前还是之后。

如果希望仅在setState和ReactDOM.render调用之后执行this.props.callback()，则将其作为setState调用的回调参数传递：setState(updater[, callback])

setState official doc

用其他语句调用setState方法

3 个答案: