ES6中的React生命周期详解

太长时间没写react了，有点生。重新捡起来练练手。

import React,{ Component } from 'react';class Demo extends Component {constructor(props,context) {super(props,context)this.state = {//定义state}}
componentWillMount () {
}
componentDidMount () {
}
componentWillReceiveProps (nextProps) {
}
shouldComponentUpdate (nextProps,nextState) {
}
componentWillUpdate (nextProps,nextState) {
}
componentDidUpdate (prevProps,prevState) {
}
render () {return (<div></div>)
}
componentWillUnmount () {
}
}
export default Demo;

React生命周期主要包括三个阶段：初始化阶段、运行中阶段和销毁阶段，在React不同的生命周期里，会依次触发不同的钩子函数

一、初始化阶段

1、constructor()

constructor参数接受两个参数props,context。获取到父组件传下来的的props,context。如果你想在constructor构造函数内部(注意是内部哦，在组件其他地方是可以直接接收的)使用props或context,则需要传入，并传入super对象。

constructor(props,context) {super(props,context)console.log(this.props,this.context) // 在内部可以使用props和context
}

也可以单独传一个，都不需要就不用传。

关于ES6的class constructor和super

只要组件存在constructor,就必需要写super,否则this指向会错误

constructor() {console.log(this) // 会报错，this指向错误
}

2、componentWillMount() 组件将要挂载

组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作

但是这里有一个问题

ajax请求能写在willmount里吗？
：答案是不推荐，别这么写

1.虽然有些情况下并不会出错，但是如果ajax请求过来的数据是空，那么会影响页面的渲染，可能看到的就是空白。
2.不利于服务端渲染，在同构的情况下，生命周期会到componentwillmount，这样使用ajax就会出错

3、render()

组件渲染

4、componentDidMount() 组件渲染完成

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

二、运行中阶段

5、componentWillReceiveProps (nextProps)

组件接收到属性时触发

在接受父组件改变后的props需要重新渲染组件时用到的比较多

6、 shouldComponentUpdate()

当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发

shouldComponentUpdate(newProps, newState) {if (newProps.number < 5) return true;return false
}
//该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能：

一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

例如React中的就提供了一个PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组

7、 componentWillUpdate(nextProps,nextState)

组件即将被更新时触发

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState

8、 componentDidUpdate()

组件被更新完成后触发。

react只有在第一次初始化成功才会进入componentDidmount,之后每次重新渲染后都会进入componentDidUpdate这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

三、销毁阶段

9、 componentWillUnmount()

组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消Redux的订阅事件等等。