React批量更新与事件体系

let count = 0;
class MyComponent extends React.Component{
  constructor(){
    super();
    this.state = {
      count : count
    };
  }
  
  componentWillMount(){
    this.setState({
      count : ++count
    });
    
    this.setState({
      count : ++count
    });
    
    setTimeout(() => {
      this.setState({
        count : ++count
      });
      this.setState({
        count : ++count
      });
    }, 1000);
  }
  
  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 (
      <div>
        <button type="button" ref={node => this.button = node} onClick={this.onClick.bind(this, 'React事件')}>生成新计数</button>
        <div>Count : {this.state.count}</div>
      </div>
    );
  }
}
ReactDOM.render(<MyComponent />, mountNode);

1. React的批量更新机制
2. BatchUpdates
   a. 什么场景下会默认使用React批量更新？
   ⅰ. 答案：componentWillMount和React事件体系内
   b. 为什么要做批量更新？
   ⅰ. 解决性能问题
3. React事件体系
   a. React事件体系与浏览器原生事件体系的关系
   b. 为什么React自己维护一套自己的事件体系
   ⅰ. 一个重要的原因是为了实现批量更新

setState
1: setState是同步还是异步是根据什么来判断的
调用合成事件的时候是异步
原生事件的是同步
2： setState的简单原理(加分项)
大概就是采用队列机制
1：this.setState({ name: ‘新的state’ })
2：存入peding队列
3：调用enqueueUpdate
4: 判断是否处于批量更新状态 isBatchingUpdates
5: isBatchingUpdates为true， 调用setState的组件存入dirtyComponents中,
isBatchingUpdates为false, 遍历dirtyComponents中的组件调用updateComponent