react中的生命周期可以分为四大类,分别为定义时触发,渲染时触发,更新时触发以及卸载时触发。本文章会对所有生命周期进行归纳并从源码的角度解析其实现原理(写到一半发现文章已经有点长了,决定新开一片文章来解析实现原理,传送门)
定义时触发(createClass)
getDefaultProps
该生命周期是在定义组件的时候触发,其返回的对象可以用于设置默认的 props,由于这个方法是在构造函数中执行的,所以这个方法在整个生命周期中只会触发一次
渲染时触发(MOUNTING)
getInitialState
此方法在每次组件实例化的时候都会执行,其返回值用于设置当前组件实例的默认state,在此方法中可以访问到当前实例的props
componentWillMount
该方法会在组件首次渲染之前调用,即render方法之前
render
render方法用于返回一个虚拟的组件对象,也就是虚拟dom,该方法在每个组件中都必须显式实现,并且返回一个对象,用于渲染出真实的dom节点
componentDidMount
这个方法是首次渲染完成后回调的一个方法,该方法被调用时,表示组件已经渲染完成,此时真实的 DOM也已经被渲染出来,一般用于初始化的一步操作都会在这个生命周期中完成
更新时触发(RECEIVE_PROPS)
componentWillReceiveProps(object nextProps, object nextContext)
该方法会在组件props或者context发生改变时触发,如上所示,该方法包含两个参数,nextprops和nextContext分别表示新的props和context,网上的很多资料不知道因为比较旧的原因还是其他原因,都少了nextContext这个参数,但根据15.0的源码分析和真实的调试结果,是会有nextContext这个参数的回调,关于context的相关内容可以参考之前的一片博客,此处是传送门
shouldComponentUpdate(object nextProps, object nextState, object nextContext)
该方法在组件的state和props发生改变之后执行,默认返回true,当返回false时,组件不会重新渲染,该方法提供了一个钩子,让开发者自行决定是否需要对组件重新渲染,nextProps, nextState, nextContext分别表示新的props,state和context
componentWillUpdate(object nextProps, object nextState, object nextContext)
该函数是在组件接收完新参数,但是尚未渲染完成之前触发
componentDidUpdate.bind(object prevProps, object prevState, object prevContext)
这个方法会在接收完新的参数,并且重新渲染完成之后调用,需要注意的是,这个时候传入的参数,是更新之前的旧props,state和context,毕竟,这时候props和state等都已经更新完毕,这里再回传也就没什么必要了
卸载时触发(UNMOUNTING)
componentWillUnmount
当React使用完一个组件时,该组件会被从 DOM 中卸载后销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,此处可以做一些清理性的工作,如销毁定时器、事件等操作