react 生命周期

• 初始化

一、getDefaultProps()

设置默认的props，也能够用dufaultProps设置组件的默认属性.

二、getInitialState()

在使用es6的class语法时是没有这个钩子函数的，能够直接在constructor中定义this.state。此时能够访问this.props

三、componentWillMount()

组件初始化时只调用，之后组件更新不调用，整个生命周期只调用一次，此时能够修改state。

四、 render()

react最重要的步骤，建立虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

五、componentDidMount()

组件渲染以后调用，只调用一次。

• 更新

六、componentWillReceiveProps(nextProps)

组件初始化时不调用，组件接受新的props时调用。

七、shouldComponentUpdate(nextProps, nextState)

react性能优化很是重要的一环。组件接受新的state或者props时调用，咱们能够设置在此对比先后两个props和state是否相同，若是相同则返回false阻止更新，由于相同的属性状态必定会生成相同的dom树，这样就不须要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤为是在dom结构复杂的时候

八、componentWillUpdata(nextProps, nextState)

组件初始化时不调用，只有在组件将要更新时才调用，此时能够修改state

九、render()

组件渲染

十、componentDidUpdate()

组件初始化时不调用，组件更新完成后调用，此时能够获取dom节点。

• 卸载

十一、componentWillUnmount()

组件将要卸载时调用，一些事件监听和定时器须要在此时清除。

 

 

下面我从constructor构造函数开始，从参数，做用，用法各方面总结

一、constructor

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

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

固然若是你只须要在构造函数内使用props或者context，那么只传入一个参数便可，若是都不能够，就都不传。

关于ES6的class constructor和super

只要组件存在constructor,就必要要写super,不然this指向会错误

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

二、componentWillMount 组件将要挂载

一、组件刚经历constructor,初始完数据
二、组件还未进入render，组件还未渲染完成，dom还未渲染

componentWillMount 通常用的比较少，更多的是用在服务端渲染，（我还未使用过react服务端渲染哈，因此也写不了不少）
可是这里有一个问题

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

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

三、componentDidMount 组件渲染完成

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

4.componentWillReceiveProps (nextProps)

componentWillReceiveProps在接受父组件改变后的props须要从新渲染组件时用到的比较多
它接受一个参数

1.nextProps
经过对比nextProps和this.props，将nextProps setState为当前组件的state，从而从新渲染组件

componentWillReceiveProps (nextProps) {
    nextProps.openNotice !== this.props.openNotice && this.setState({ openNotice:nextProps.openNotice }，() => { console.log(this.state.openNotice:nextProps) //将state更新为nextProps,在setState的第二个参数（回调）能够打印出新的state }) } 

关于setState的用法及深刻了解 后面会专门整理一篇文章

5.shouldComponentUpdate(nextProps,nextState)

惟一用于控制组件从新渲染的生命周期，因为在react中，setState之后，state发生变化，组件会进入从新渲染的流程，（暂时这么理解，其实setState之后有些状况并不会从新渲染，好比数组引用不变）在这里return false能够阻止组件的更新

由于react父组件的从新渲染会致使其全部子组件的从新渲染，这个时候其实咱们是不须要全部子组件都跟着从新渲染的，所以须要在子组件的该生命周期中作判断

对于react初学者，可能涉及这个生命周期的机会比较少，可是若是你的项目开始注重性能优化，随着你对react的喜好和深刻，你就会用到这个生命周期

6.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true之后，组件进入从新渲染的流程，进入componentWillUpdate,这里一样能够拿到nextProps和nextState

7.render函数

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会经过其diff算法比较更新先后的新旧DOM树，比较之后，找到最小的有差别的DOM节点，并从新渲染

react16中 render函数容许返回一个数组，单个字符串等，不在只限制为一个顶级DOM节点，能够减小不少没必要要的div(固然注意升级你的react版本，将现有项目升到react16并不会出现什么bug，惟一注意的是proTypes类型检测换了名字~)

意思你如今能够这样：

render () { return " " 

}
或者这样：

render () {
  return [ <div></div> <div></div> 

]
}

八、componentDidUpdate(prevProps,prevState)

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,以后每次从新渲染后都会进入这个生命周期，这里能够拿到prevProps和prevState，即更新前的props和state。
若是你理解了组件一次从新渲染的过程，那么你应该理解下面5处打印出来的state应该是相同的。（关于setState异步是同步的理解，后面也会整理一篇文章~）

componentWillReceiveProps (nextProps,nextState) {
    this.setState({ fengfeng:nextProps.fengfeng },()=>{ console.log(this.state.fengfeng) //1 }) } shouldComponentUpdate (nextProps,nextState) { console.log(nextState.fengfeng) //2 } componentWillUpdate (nextProps,nextState) { console.log(nextState.fengfeng) //3 } componentDidUpdate (prevProps,prevState) { console.log(this.state.fengfeng) //5 } render () { console.log(this.state.fengfeng) //4 return ( <div></div> ) } 

九、componentWillUnmount ()

componentWillUnmount也是会常常用到的一个生命周期，初学者可能用到的比较少，可是用好这个确实很重要的哦

1.clear你在组建中全部的setTimeout,setInterval
2.移除全部组建中的监听 removeEventListener
3.也许你会常常遇到这个warning:

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component. 

是由于你在组建中的ajax请求返回中setState,而你组件销毁的时候，请求还未完成，所以会报warning
解决办法为

componentDidMount() {
    this.isMount === true axios.post().then((res) => { this.isMount && this.setState({ // 增长条件ismount为true时 aaa:res }) }) } componentWillUnmount() { this.isMount === false } 

拓展：

1.react生命周期父子组件渲染顺序 父子组件， componentWillMount生命周期是先进入父组件仍是子组件？ componentDidMount呢？

做者：Evan_zhan 连接：https://www.jianshu.com/p/c9bc994933d5 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。