React setState 笔试题，下面的代码输出什么？

Question

让我们详细分析一下这个 React 代码示例，以确定它在控制台中的输出结果。

class Example extends React.Component {
    constructor() {
        super();
        this.state = {
            val: 0
        };
    }

    componentDidMount() {
        this.setState({val: this.state.val + 1});
        console.log(this.state.val);    // 第 1 次 log

        this.setState({val: this.state.val + 1});
        console.log(this.state.val);    // 第 2 次 log

        setTimeout(() => {
            this.setState({val: this.state.val + 1});
            console.log(this.state.val);  // 第 3 次 log

            this.setState({val: this.state.val + 1});
            console.log(this.state.val);  // 第 4 次 log
        }, 0);
    }

    render() {
        return null;
    }
};

代码分析

1. componentDidMount 方法调用 setState 两次 :
   • this.setState({val: this.state.val + 1}); 会触发一个状态更新。
   • 由于 setState 是异步的，React 会将这两次状态更新合并（批量更新）为一次状态更新。因此， val 的最终值在这两次调用后是 1 （ 0 + 1 ）。
2. console.log(this.state.val) 输出 :
   • 第 1 次 log : 在第一次 setState 调用后，状态还没有真正更新，所以它打印的是旧的状态值 0 。
   • 第 2 次 log : 在第二次 setState 调用后，状态依旧没有真正更新，所以它仍然打印的是旧的状态值 0 。
3. setTimeout 的回调 :
   • setTimeout 中的代码会在当前执行栈清空后异步执行。React 仍然会在这段时间内批量处理状态更新。
   • 在 setTimeout 中的 setState 调用同样会被批量处理。最终状态值 val 将增加 2 （从 1 增加到 3 ）。
4. console.log(this.state.val) 输出 :
   • 第 3 次 log : 在 setTimeout 回调中第一次 setState 后，状态 val 是 2 （之前合并更新后的 1 + 1）。
   • 第 4 次 log : 在 setTimeout 回调中第二次 setState 后，状态 val 是 3 （之前的 2 + 1）。

总结

输出顺序和结果如下：

1. 第 1 次 log: 0 （第一次 setState 调用前的状态）
2. 第 2 次 log: 0 （第二次 setState 调用前的状态）
3. 第 3 次 log: 2 （ setTimeout 回调中状态更新后的值）
4. 第 4 次 log: 3 （ setTimeout 回调中第二次状态更新后的值）

所以，控制台输出的内容是：

0
0
2
3