react生命周期整理

版权声明:欢迎转载,转载请注明原始出处 https://blog.csdn.net/xiaomingelv/article/details/85925675

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 会被执行,完成所有的清理和销毁工作,此处可以做一些清理性的工作,如销毁定时器、事件等操作

没有更多推荐了,返回首页