React——生命周期
分类:
文章
•
2024-03-18 17:19:40
一、组件初始化(initialization)阶段
-
super(props)
,将父组件的props传给给子组件
-
constructor()
用来做一些组件的初始化工作,如定义this.state的初始内容
二、组件的挂载(Mounting)阶段
-
componentWillMount
—— 在组件被挂载到页面之前调用
,只调用一次
- render
-
componentDidMount
—— 在组件已经被挂载到页面后调用
,只调用一次
三、组件的更新(update)阶段
-
shouldComponentUpdate
—— 在组件被更新之前调用
- 需要返回一个
布尔值
- 为
true
,则继续往下执行
更新阶段的生命周期函数
- 为
false
,则不执行
更新阶段的生命周期函数
-
componentWillUpdate
—— 在 shouldComponentUpdate 返回 true 后执行
- render
- componentDidUpdate ——
组件更新完成后执行
-
componentWillReceiveProps
-
只在子组件中执行
,*组件不执行
- 子组件
第一次诞生
在父组件中,不会执行
- 子组件
之前已经
存在于父组件中,则执行
-
shouldComponentUpdate
—— 在组件被更新之前调用
- 需要返回一个
布尔值
- 为
true
,则继续往下执行
更新阶段的生命周期函数
- 为
false
,则不执行
更新阶段的生命周期函数
- 参数一(nextProps):改变的props
- 参数二(nextState):改变得state
- 当父组件传过来的数据改变,但子组件不用改变时,可以返回false来优化性能。如父组件的input框改变,但只点击button后子组件才会改变,则判断内容是否改变,改变才返回true,否则返回false
-
componentWillUpdate
—— 在 shouldComponentUpdate 返回 true 后执行
- render
- componentDidUpdate ——
组件更新完成后执行
四、卸载(unmounting)阶段
-
componentWIllUnmount
—— 在这个组件被剔除之前调用