react生命周期钩子函数

react生命周期钩子函数

• 挂载 组件被实例化并挂载在DOM树

  1. constructor()

     作用：

     组件被实例化时，构造函数就被最先执行，constructor第一行必须写super(props)语句，否则会报错

     应该：

     1.初始化组件的初始状态

     2.bind绑定函数，修正this指向（建议箭头函数修正）

     不应该：

     1.向后台发送请求并更新组件状态

     2.使用this.setState()初始化（不起作用，浏览器会发出警告）

  2. componentWillMount()

     作用：

     在挂载过程中被调用一次，在render函数之前执行，在这个阶段执行this.setState()不会触发二次渲染

     应该：

     1.this.setState更新组件状态

     2.发送AJAX异步请求（服务端渲染场景中，因为服务端渲染不会执行componentDidMount）

     3.发送AJAX同步请求

     不应该：

     发送AJAX异步请求（浏览器渲染场景中，可能会在render的时候没有正确请求到数据）

  3. render()

     作用：渲染组件

  4. componentDidMount()

     作用：

     组件挂载完成执行，且只执行一次

     应该：

     发送AJAX请求

     不应该：

     this.setState更新状态（会触发二次渲染）

• 更新 组件属性或者状态改变时重新渲染

  1. componentWillReceiveProps()

     作用：

     父组件重新渲染时执行

     应该：

     根据props的更新同步更新组件状态

     不应该：

     发送异步请求

  2. shouldComponentUpdate()

     作用：

     优化react性能，一般水平尽量不要使用，组件的状态或者属性改变时都会触发函数，但只有返回true时，组件才会被重新渲染

  3. componentWillUpdate()

     作用：

     在没有操作shouldComponentUpdate的前提下，会紧随其后执行；在shouldComponentUpdate被操作过的情况下，componentWillUpdate用来取代componentWillReceiveProps，同步props至组件的部分状态

     应该：

     同步props到组件状态

     不应该：

     发生异步请求

  4. componentDidUpdate()

     作用：

     组件状态及属性变化导致的重新渲染之后，主要用于请求后台数据

     应该：

     发送异步请求

     不应该：

     this.setState更新状态，会触发二次渲染

• 卸载 组件被移出DOM树

  1. componentWillUnmount()

     作用：

     组件被卸载时调用，一般用来做清理操作，清理定时器，关闭socket，请求监听器等