react之state

在vue中，在不考虑vuex的时候，组件的数据来源有两个， props和data。而在react中组件的数据来源也是两个，props和state
props一经传入，那么便不能改变，state可以通过setState方法来改变。每次setState后，组件会重新渲染，如果setState的值和原state相同，组件也会重新渲染（这点与vue不一样）。

组建的声明周期

• componentDidMount
  同vue中的mounted，组件挂载完成之后执行

react中的组件更新可以由用户来控制，而vue因为使用了Object.defineProperty,在语法层面上控制其是否执行，react中的生命周期钩子 shouldComponentUpdate交给用户来控制其更新逻辑

• shouldComponentUpdate
  接收两个参数，nextProps和nextState,新的props和新的state。
  要改变状态时：

 shouldComponentUpdate（nextProps, nextState） {
    return true;
}

• state

1. 永远不要直接修改state，只能在初始化时赋值，使用setState来改变它
2. state的更新会合并，如果state中有属性a，b，并且在组件代码中，都由用到，当setState时，只是传入了{b: xxx},那么上次的a还是会被保留，b被更新，相当于Object.assign；
   3.setState可以接收对象或者函数，接收对象时，将这个对象和之前的state合并，作为新的state。接收函数时，传入老的state，返回新的state；
3. state的更新可能是异步的（这点和Vue有点像，vue中组件更新前，也会将状态改变合并起来）
   1. setState时，默认时批量更新模式batchUpdate，此种模式下，状态不会立刻更新，而是缓存起来放到一个队列里，等事件处理函数完成后才执行更新
2. 如果写在setTimeout里，会立即更新

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  componentDidMount() {
    this.timer = setInterval(this.tick, 1000);
  }
  shouldComponentUpdate(nextProps, nextState) {
    return this.state !== nextState;
  }
  tick = () => {
    // this.setState({date: new Date()}); //一般会这样写
    this.state.date = new Date(); //
    this.setState(this.state); //像这样，即使this.state的引用没变, 也会触发更新
  };
  render() {
    return (
      <div>
        <p>当前时间是：</p>
        {this.state.date.toLocaleString()}
      </div>
    );
  }
}

ReactDom.render(<Clock />, document.getElementById('root'));

SPA中，每个组件中销毁前都需要清除定时器和绑定在window等dom上的事件，一是为了不报错，而是避免内存泄漏
vue中我们再beforeDestory中清除，而在react中有componentWillUnmount