React 中的生命周期
简介: 生命周期函数指在某一个时刻组件会自动调用执行的函数
一个组件会经历如下图的几个过程 , 先配一张图
Initialization: 这个时候组件会初始化一些数据(setup props and state)
Mounting: 组件要被渲染,并挂载到页面, 而挂载会经历几个周期
componentWillMount: 在组件即将被挂载到页面之前的时刻自动执行
render: 将组件的内容渲染到页面上
componentDidMount: 组件被挂载到页面之后自动执行(可以在这个生命周期请求数据)
Updation 组件更新的时候(当props, states发生变化)
props和states发生变化,两个的流程略微有些不同
下面来一起看看有哪些差异
props:
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
states:
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
先对两个共同的生命周期做一下了解
shouldComponentUpdate: 组件更新之前,会被自动执行,需要返回一个布尔值, 如果返回的
是true,则需要更新,若返回的是false,则不会更新. 可以在这个生命周期里面做性能优化
componentWillUpdate: 组件被更新之前,它会自动执行,但是它在shouldComponentUpdate
之后执行, shouldComponentUpdate 返回的true,它才会执行,若是返回false,则这个函数
就不会执行
render: 将组件的内容渲染到页面上
componentDidUpdate: 组件更新完成之后执行
下面是props和state 存在差异的生命周期
componentWillReceiveProps: 一个组件要从父组件接受参数,只要父组件的render函数被重新执行了,子组件的这个生命周期函数就会被执行( 这个组件第一次存在父组件中,就不会执行,这个组件之前已经存在于父组件中,才会执行 )
Unmounting 组件卸载过程
componentWillUnmount: 当这个组件即将从页面中剔除的时候,才会执行