React(一)：生命周期

首先看下react官网的生命周期图解

实例：时钟封装

class Clock extends React.Component {
  constructor(props) {
    //添加一个构造函数内部调用props。    //初始state

    super(props);
    this.state = {date: new Date()};
  }
  
  componentWillMount () {
    //钩子：组件将要挂载
    //1、组件刚经历constructor,初始完数据
    //2、组件还未进入render，组件还未渲染完成，dom还未渲染
    //3、componentWillMount 一般用的比较少，更多的是用在服务端渲染
  }
  componentDidMount() {
    //当组件输出到 DOM 后会执行 componentDidMount() 钩子
    //组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
    //1、添加事件addEventListener
    //2、调用ajax请求

    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  
  componentWillReceiveProps (nextProps) {
    //componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多
    //通过对比nextProps和this.props，将nextProps setState为当前组件的state，从而重新渲染组件
  }
  
  shouldComponentUpdate (nextProps,nextState) {
    return this.state.date !== nextState.date;
    //唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，
    // （暂时这么理解，其实setState以后有些情况并不会重新渲染，比如数组引用不变）在这里return false可以阻止组件的更新
  }
  
  componentWillUpdate (nextProps,nextState) {
    //shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState
    
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    //render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，
    // 在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染
    
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }

    componentDidUpdate (prevProps,prevState) {
    //组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,
    //之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。
  }
  componentWillUnmount() {
    ///销毁钩子：完成所有的清理和销毁工作
    //1、clear你在组建中所有的setTimeout,setInterval
    //2、移除所有的监听 removeEventListener

    clearInterval(this.timerID);
  }

}

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

在 CodePen 上尝试。

定义：

1、每当Clock组件第一次加载到DOM中的时候，生成定时器，这在React中被称为挂载

2、同样，每当Clock生成的这个DOM被移除的时候，清除定时器，这在React中被称为卸载。

这些方法被称作生命周期钩子

注意