摘要：原生事件中的在按鈕原生事件中定義的和定時(shí)器效果一樣，每次都會(huì)引起新的事件是合并的成一次的。原生事件事件生成計(jì)時(shí)器點(diǎn)擊按鈕，先執(zhí)行原生事件，再執(zhí)行事件，但是原生事件會(huì)觸發(fā)兩次，事件觸發(fā)一次。

在同一個(gè)方法中多次setState是會(huì)被合并的，并且對(duì)相同屬性的設(shè)置只保留最后一次的設(shè)置；

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}
                

                

            
        )
    }
}

上述執(zhí)行過(guò)程如下：


willmount中的setState會(huì)合并成一次執(zhí)行，count只會(huì)保留最后一次的設(shè)置，前面的放棄，所以willmount之后是1，并不是3；并且在render之前執(zhí)行，不會(huì)引起新的render

render之后執(zhí)行didMount，setState做同樣的處理，這是count是2，并且引起新的render
點(diǎn)擊按鈕，setState做同樣處理，count是3，引起新的render

定時(shí)器中的setState，每次都會(huì)引起新的render，即使是同一個(gè)定時(shí)器中的多次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都會(huì)引發(fā)新的render，需要深入了解的可以查查setState的原理，簡(jiǎn)單理解是定時(shí)器中的setState沒(méi)走react的事物機(jī)制，執(zhí)行時(shí)批量更新沒(méi)被設(shè)置true，所以每次都直接render了。

在按鈕原生事件中定義的setState,和定時(shí)器效果一樣，每次setState都會(huì)引起新的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="生成計(jì)時(shí)器" />
            
Count:{this.state.count}
        
    }

點(diǎn)擊按鈕，先執(zhí)行原生事件，再執(zhí)行react事件，但是原生事件會(huì)觸發(fā)兩次render，react事件觸發(fā)一次。

上述是我對(duì)setState的理解，拋磚引玉，希望幫助大家有方向的去了解react原理機(jī)制。剛開(kāi)始接觸，很多同學(xué)想深入了解，但可能不知道從何入手，這也是我遇到過(guò)的困擾，所以現(xiàn)在分享出來(lái)，希望能幫助大家少走彎路，更快的、更有準(zhǔn)針對(duì)性的去研究學(xué)習(xí)React。

以下為補(bǔ)充內(nèi)容

其實(shí)在回調(diào)函數(shù)中，setState是不會(huì)觸發(fā)批量更新機(jī)制的，無(wú)論是promise，ajax，setTimeout回調(diào)等等，同時(shí)設(shè)置多次setState，每個(gè)setState都會(huì)多帶帶執(zhí)行并render，因?yàn)樯舷挛陌l(fā)生了變化。

下面是驗(yàn)證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時(shí)發(fā)現(xiàn)，雖然didMount中的多次setState會(huì)被合并，符合正常的規(guī)律，但是通過(guò)調(diào)試發(fā)現(xiàn)，在didMount中isBatchingUpdates始終是false，而事件調(diào)用觸發(fā)的setState，isBatchingUpdates則是true。