react生命周期
2018-11-13 本文已影响0人
头头_d92d
初始化时
-
componentWillMount()
:只在组件初始化时调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state -
render()
:创建dom,此时不能更改state -
componentDidMount()
:请求数据(ajax)一般在这个函数内, 组件渲染之后调用,只调用一次
更新时
-
componentWillReceiveProps(nextProps)
:组件初始化时不调用,组件接受新的props时调用,父组件向子组件传数据时,如果数据改变了,就要在子组件的此生命周期中重新获取nextProps后再进行渲染 -
shouldComponentUpdate(nextProps, nextState)
:组件接受新的state或者props时调用,可以在此对比前后两个props和state是否相同,如果相同则不更新,不相同再去更新,这样可以节省性能 -
componentWillUpdate(nextProps, nextState)
:组件初始化时不调用,只有在组件将要更新时才调用。在此方法里禁止修改state属性,否则程序将陷入死循环。 -
render()
:更新dom树,此时不能更改state -
componentDidUpdate()
:组件初始化时不调用,组件更新完成后调用,在此方法里禁止修改state属性,否则程序将陷入死循环。
卸载时
-
componentWillUnmount()
:组件将要卸载时调用,一些事件监听和定时器需要在此时清除。
生命周期流程图
如果组件有嵌套时,都是从父组件的componentWillMount开始,然后是父组件的render,渲染到子组件时开始子组件的componentWillMount→子组件的render→子组件的componentDidMount,直到子组件的周期结束,才继续开始父组件的周期直到父组件的render结束→父组件的componentDidMount