React的生命周期函数

一、生命周期函数的定义

在某个时刻自动被调用的函数是生命周期函数

二、React中生命周期函数示意图

lifeFuncs.png

为了记忆方便，我把 componentWillXXX-render-componentDidXXX的过程简单地称为 Will-render-Did
那么上面的图示就可以简化成：

生命周期.png

三、生命周期函数的调用时期

• Initialization
  执行Constructor，初始state和props
• Mounting
  Will：先执行，判断组件是否挂载
  render：渲染组件
  Did：组件渲染完成后执行
• Updation
  ComponentWillReceiveProps：如果组件不是第一次存在页面且父组件render执行时，才执行
  ComponentShouldUpdate：判断组件是否需要更新，如果返回true，表示需要更新；如果返回false，则表示不需要更新
  Will：更新组件前执行
  render：state发生变化，或者父组件的render（props发生变化）执行时执行
  Did：组件更新完成后执行
• UnMounting
  Will：组件移除之前执行
  注意：1. 如果移除组件，那么Updation中的生命周期函数不会被执行
         2. render不能省略，因为render不存在Component中，不能继承而来，需要自定义

四、生命周期函数的使用场景

• 避免子组件不必要的更新
  我们知道如果父组件的render执行，子组件的render会被执行，重新渲染子组件。但是，父组件render的执行不一定是该子组件绑定的数据改变造成的，这就造成了子组件不必要的更新。
  解决方法：

  // 在子组件中
  ComponentRecevieProps(nextProps, nextState){
    // content是props中的一个属性
    return nextProps.content !== this.props.content
  }
  

• 发送ajax请求
  ajax请求最好放在ComponentDidMount中

  componentDidMount(){
      // 这里使用了axios模块
      axios.get('/api/todolist')
      .then(() => {alert('success')})
      .catch(() => {alert('error')})
  }