javascript - react setstate接受的对象在setInterval和onClick中是不同的

Question

我对 setState() accepted 对象感到困惑。代码链接在这里 https://codepen.io/DRL9/pen/jadbWq代码如下:

class Counter extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        intervalCount: 1,
        buttonCount: 1
    };
    this.increment = 1;
    this.intervalId = null;
}
tick() {
    this.setState({
        intervalCount: this.state.intervalCount + this.increment
    });
    this.setState({
        intervalCount: this.state.intervalCount + this.increment
    });
}
onClick() {
    this.setState({
        buttonCount: this.state.buttonCount + this.increment
    });
    this.setState({
        buttonCount: this.state.buttonCount + this.increment
    });
}
componentDidMount() {
    this.intervalId = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
    clearInterval(this.intervalId);
}
render() {
    return <div>
        <div>
            interval counter: {this.state.intervalCount}
        </div>
        <button onClick={this.onClick.bind(this)}>increment</button>
        <div>
            button counter: {this.state.buttonCount}
        </div>
    </div>;
}
}

我希望 intervalCount 会增加 1，就像我单击增量按钮时的行为一样。但是，它每次滴答增加 2。唯一不同的是，一个更新在 setInterval 函数中，另一个更新在 onClick 函数中。

为什么他们的行为不同？

Answer 1

我们不能绝对谈论 setState 的时间因为根据定义，它是不可预测的。状态更改可能会延迟到将来的某个时间，并且此行为可能会有所不同，具体取决于您使用的 React 版本。

在提供的示例中，React 将状态更新延迟到 onClick。处理程序已完成运行。 React 知道这个处理程序何时结束运行，因为我们通过 JSX 的 onClick 传递处理程序(然后由 React 内部处理):

// React processes the onClick handler below
<button id="btn" onClick={this.onClick.bind(this)}>increment</button> 

如果我们要检测 onClick我们自己逻辑，通过手动抓取 button来自 DOM 的元素并添加一个点击事件监听器来调用我们的 onClick处理程序，button更新与 setInterval 相同(React 不知道我们正在点击处理程序中更新状态，因此它选择不对对 setState 的调用进行批处理优化)。

看到这个 codepen ，其中按钮计数器在 componentDidMount 中手动添加了一个点击处理程序。函数而不是使用 JSX 的 onClick .请注意，按钮计数器现在以间隔 2 而不是 1 递增。

我想强调的是，这种行为不是确定性的，您永远不应该使用 this.state在你的setState功能。相反，您想使用 setState 的变体接受包含先前状态的 updater 函数。然后，从传递给更新程序的状态构建新状态:

this.setState(state => ({
    buttonCount: state.buttonCount + this.increment
}));

看到这个 codepen ，它使用更新程序更新按钮计数器，产生以 2 为间隔更新按钮计数器的预期效果。

有关 setState 的更多信息请参阅 official documentation 。