摘要：原生事件中的在按钮原生事件中定义的和定时器效果一样，每次都会引起新的事件是合并的成一次的。原生事件事件生成计时器点击按钮，先执行原生事件，再执行事件，但是原生事件会触发两次，事件触发一次。

在同一个方法中多次setState是会被合并的，并且对相同属性的设置只保留最后一次的设置；

import React from "react";

export class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
            
        };
    }
    componentWillMount() {
        let me = this;
        me.setState({
            count: me.state.count + 2
        });
        me.setState({
            count: me.state.count + 1
        });
    }
    componentDidMount() {
        let me = this;
        me.setState({
            count: me.state.count + 2
        });
        me.setState({
            count: me.state.count + 1
        });
    }

    onClick() {
        let me = this;
        me.setState({
            count: me.state.count + 1
        });
        me.setState({
            count: me.state.count + 1
        });
    }

    render() {
        console.log(this.state.count);
        console.log("1111111111111111111111111111111111111111111");
        return (
            

                
{this.state.count}
                

                

            
        )
    }
}

上述执行过程如下：


willmount中的setState会合并成一次执行，count只会保留最后一次的设置，前面的放弃，所以willmount之后是1，并不是3；并且在render之前执行，不会引起新的render

render之后执行didMount，setState做同样的处理，这是count是2，并且引起新的render
点击按钮，setState做同样处理，count是3，引起新的render

定时器中的setState，每次都会引起新的render，即使是同一个定时器中的多次setState

代码更改成如下：

    componentWillMount() {
        let me = this;
        setTimeout(() => {
            me.setState({
                count: me.state.count + 1
            });
            me.setState({
                count: me.state.count + 1
            });
        }, 0);
    }
    
       componentDidMount() {
        let me = this;
        setTimeout(() => {
            me.setState({
                count: me.state.count + 1
            });
            me.setState({
                count: me.state.count + 1
            });
        }, 0);
    }
    
    onClickTime() {
        let me = this;
        setTimeout(() => {
            me.setState({
                count: me.state.count + 1
            });
            me.setState({
                count: me.state.count + 1
            });
        }, 0);
    }

上述代码，每次setState都会引发新的render，需要深入了解的可以查查setState的原理，简单理解是定时器中的setState没走react的事物机制，执行时批量更新没被设置true，所以每次都直接render了。

在按钮原生事件中定义的setState,和定时器效果一样，每次setState都会引起新的render
react事件是合并的成一次render的。

 componentDidMount() {
        this.button.addEventListener("click", this.onClick.bind(this, "原生事件"), false);
 }
    
 onClick(info) {
        console.log(info);
        this.setState({
            count: ++count
        });
        this.setState({
            count: ++count
        });
    }

    render() {
        console.log(this.state.count);
        return 

             this.button = input} onClick={this.onClick.bind(this, "React事件")} value="生成计时器" />
            
Count:{this.state.count}
        
    }

点击按钮，先执行原生事件，再执行react事件，但是原生事件会触发两次render，react事件触发一次。

上述是我对setState的理解，抛砖引玉，希望帮助大家有方向的去了解react原理机制。刚开始接触，很多同学想深入了解，但可能不知道从何入手，这也是我遇到过的困扰，所以现在分享出来，希望能帮助大家少走弯路，更快的、更有准针对性的去研究学习React。

以下为补充内容

其实在回调函数中，setState是不会触发批量更新机制的，无论是promise，ajax，setTimeout回调等等，同时设置多次setState，每个setState都会多带带执行并render，因为上下文发生了变化。

下面是验证code

  onClickBtn = () => {
    // const promise = new Promise((resolve, reject) => {
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    //   resolve();
    // });

    // promise.then(() => {
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    // });

    fetch("/api/getlist")
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log(JSON.stringify(data));
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count);
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count);
      });
  };

在写demo时发现，虽然didMount中的多次setState会被合并，符合正常的规律，但是通过调试发现，在didMount中isBatchingUpdates始终是false，而事件调用触发的setState，isBatchingUpdates则是true。