react的生命周期

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: 当这个组件即将从页面中剔除的时候,才会执行