React(一)：生命周期

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

实例：时钟封装

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

    super(props);
    this.state = {date: new Date()};
  }
  
  componentWillMount () {
    //钩子：组件将要挂载
    //一、组件刚经历constructor,初始完数据
    //二、组件还未进入render，组件还未渲染完成，dom还未渲染
    //三、componentWillMount 通常用的比较少，更多的是用在服务端渲染
  }
  componentDidMount() {
    //当组件输出到 DOM 后会执行 componentDidMount() 钩子
    //组件第一次渲染完成，此时dom节点已经生成，能够在这里调用ajax请求，返回数据setState后组件会从新渲染
    //一、添加事件addEventListener
    //二、调用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() {
    ///销毁钩子：完成全部的清理和销毁工做
    //一、clear你在组建中全部的setTimeout,setInterval
    //二、移除全部的监听 removeEventListener

    clearInterval(this.timerID);
  }

}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);复制代码

在 CodePen 上尝试。

定义：

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

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

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

注意

react v16.3，生命周期去掉了如下三个

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

同时为了弥补失去上面三个周期的不足又加了两个

• static getDerivedStateFromProps
• getSnapshotBeforeUpdate

1. 在upate以前获取dom节点，getSnapshotBeforeUpdate(prevProps, prevState)代替componentWillUpdate(nextProps, nextState)。
   
2. getSnapshotBeforeUpdate在render以后，但在节点挂载前componentDidUpdate(prevProps, prevState, snapshot)直接得到getSnapshotBeforeUpdate返回的dom属性值。