reactjs生命周期（React生命周期, setState、props改变触发的钩子函数）

本文目录

• React生命周期, setState、props改变触发的钩子函数
• 理解React：Fiber架构和新旧生命周期
• react生命周期
• React组件的生命周期函数是什么
• 什么是react生命周期和生命周期钩子函数
• react 生命周期执行顺序，render执行条件
• react新的生命周期函数getDerivedStateFromProps
• ReactNative组件的生命周期多长
• react生命周期，以及各个周期都做了什么

React生命周期, setState、props改变触发的钩子函数

在接受父组件改变后的props需要重新渲染组件时用到的比较多。将nextProps的state为当前组件的state,从而渲染组件

可用于性能优化（部分更新） 在setState后, state发生变化, return false时可以阻止组件更新。
父组件的重新渲染会导致子组件也重新渲染, 这个时候如果我们不需要所有子组件都跟着重新渲染, 可以在子组件的该生命周期中做判断

shouldComponentUpdate返回true,则进入改流程

组件的每次更新都会执行此钩子函数, 通过参数可以拿到更新前的props和state

render函数会插入jsx生成dom结构。react会生成一份虚拟DOM树,在每次组件更新时通过diff算法将虚拟DOM与旧虚拟DOM比较,找到最小有差异的DOM节点,重新渲染

理解React：Fiber架构和新旧生命周期

React16.3之后React的 Reconciler 架构被重写(Reconciler用于处理生命周期钩子函数和DOM DIFF)，之前版本采用函数调用栈递归同步渲染机制即Stack Reconciler，dom的diff阶段不能被打断，所以不利于动画执行和事件响应。React团队使用Fiber Reconciler架构之后，diff阶段根据虚拟DOM节点拆分成包含多个工作任务单元(FiberNode)的Fiber树(以链表实现)，实现了Fiber任务单元之间的任意切换和任务之间的打断及恢复等等。Fiber架构下的异步渲染导致了 componentWillMount 、 componentWillReceiveProps 、 componentWillUpdate 三个生命周期在实际渲染之前可能会被调用多次，产生不可预料的调用结果，因此这三个不安全生命周期函数不建议被使用。取而代之的是使用全新的两个生命周期函数： getDerivedStateFromProps 和 getSnapshotBeforeUpdate 。

可能导致的bug：在需要重置SimpleInput组件的情况下，由于 props.attr 未改变，导致组件无法正确重置状态，表现就是input输入框组件的值还是上次遗留的输入。

react生命周期

React生命周期

一、react组件的生命周期

1、生命周期指的是组件从初始化开始到结束的过程  或者是生命周期是描述react组件从开始到结束的过程

2、每个react组件都具有生命周期

3、react都对组件通过生命周期给予的钩子函数进行管理

二、钩子函数

指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数    叫做钩子函数；一方面又变动。另一方面立马去处理

三、react组件经历总体阶段

1、mounted阶段  加载阶段  或者说初始化阶段  这个阶段组件由jsx转换成真实dom

2、update阶段 组件运行中阶段 或者更新阶段  当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段

3、umount阶段  组件卸载阶段  这个一般是组件被浏览器回收的阶段

四、生命周期整体流程：

1、实例化

getDefaultProps 取得默认属性

getInitialState 初始化状态

componentWillMount 即将进入dom

render 描画dom

componentDidMount 已经进入dom

2、具体的声明函数周期---运行中阶段  数据更新过程

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新值componentWillReceiveProps（已加载组件收到新的参数时调用）

2、组件是否更新 shouldComponentUpdate  （影响整个项目的性能，决定视图的更新）

3、组件即将更新 componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数 componentDidUpdate

3、销毁时 componentWillUnmount

卸载组件

ReactDOM.unmountComponentAtNode(‘节点’)

React组件的生命周期函数是什么

每一个组件都有一些生命周期函数。
当组件实例被创建并且会插入到DOM中，下面这些函数会被调用
constructor
componentWillMount
render
componentDidMount改变组件的state或props会导致更新，当重新渲染组件时会调用下面这些方法
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate当组件从DOM中移除，会调用下面的方法
componentWillUnmount一.render()render方法是必须的，render的返回值是下面的类型：
(1)react元素：要么是自定义的组件要么是原生的DOM组件
(2)字符串或者数字:会被渲染成DOM中的文本节点
(3)Portals:通过ReactDOM.createPortal创建
(4)null:什么都不会渲染
(5)Boolean:什么都不渲染
(6)包含多个元素的数组
render(){
return [
《li key=’1’》1《/li》,
《li key=’2’》2《/li》
]
} render方法应该是简单的，在render中不能修改组件的state，每一次调用render都会返回一个新的结果。并且在render中也不能与浏览器进行交互，如果需要与浏览器交互，就在componentDidMount或者其他生命周期函数中执行。
二.constructor(props)react组件的构造函数在组件装载之前调用。如果没有显示的定义constructor，那么在实例化组件时会调用默认的constructor，如果在React.Component的子类中显示的定义了constructor，那么就要在constructor中最开始调用super(props).
在构造函数中实例化state是一个很好的选择。下面举例一段代码
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
} 在react中使用props初始化state是合法的，但是这存在一个问题：当props被更新时，state并不会被更新。解决的方法是：在组件的componentWillReceiveProps(nextProps)中用新的props更新state。虽然这能解决问题，但是并不推荐，推荐把state提升到最近的公共父组件中
三.componentWillMount()
当装载发生之前会立即调用componentWillMount,componentWillMount会在调用render之前被调用，所有在componentWillMount中修改state，不会导致组件的重新渲染。服务器端渲染才会调用这个方法，所有推荐通过constructor代替这个方法。
四.componentDidMount()当组件被装载完成会立即触发componentDidMount，在这个函数中修改state被导致组件重新渲染。组件被装载之后才能操作DOM。如果你需要加载远程数据，在这个地方发送网络请求是个不错的主意.
五.componentWillReceiveProps(nextProps)当已经被转载的组件接受新的props之前componentWillReceiveProps会被触发。如果你需要更新state去响应props的更新，可以在这里通过setState方法更新state。当组件首次接受到props，这个方法不会被调用.
注意：props没有被改变也可能会调用这个方法，所有在这个方法中将当前的props去next props进行比较是很有必要的。
六.shouldComponentUpdate(nextState,nextProps)当新的props或state被接受，在渲染之前会调用shouldComponentUpdate，这个方法默认是返回true，初次渲染和使用forceUpdate，不会调用这个方法。如果shouldComponentUpdate返回false,之后的componentWillUpdate,render以及componentDidMount不会被调用,组件以及他的子组件不会被重新渲染。
七.componentWillUpdate(nextProps, nextState)当接受到新的props或state，在重新渲染之前会立即调用这个方法。在这个方法中不能this.setState()，初次渲染不会调用这个方法
八.componentDidUpdate(prevProps, prevState)当更新完成之后会立即调用这个方法，初次渲染不会调用这个方法。当组件被更新之后可以在这里操作DOM，当你发现现在的props与之前的props不一样，在这里发送网络请求是个不错的主意
九.componentWillUnmount()组件被摧毁之前会立即调用这个方法，在这个方法中可以做一些必要的清理

什么是react生命周期和生命周期钩子函数

react生命周期：指的是一个React组件在创建到销毁经过的一系列过程，基本可以分为挂载、更新和卸载三个周期（可能表述不太精准）。

生命周期钩子函数：指的是React组件在经过某些特殊的过程是会触发组件里面特定的方法，这里称为钩子函数（下面举三个常用的钩子函数）。

举几个简单例子：（具体全量的可以自行百度下，都有比较全面的介绍的）

componentWillMount: 挂载之前触发调用次函数，可以操作数据，此时还没有生成实际的DOM，处于VirtualDOM的状态。（这个状态可以做一些数据处理，查询、处理页面渲染需要的数据）

componentDidMount: 页面已经渲染完成，在网页上已经生成实际的DOM（此时可以操作页面的dom元素，document.getElementById可以获取到具体的dom对象，比如获取canvas对象，加载echarts图面，都可以在这个函数里进行操作）

componentWillUnmount: 组件卸载之前触发这个方法。（在这里可以处理一些页面状态销毁的操作，例如clearTimeout等）

react 生命周期执行顺序，render执行条件

Mounting（加载阶段：涉及4个钩子函数）

1. constructor()
加载的时候调用一次，可以初始化state

2. static getDerivedStateFromProps(props, state)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

3. render()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

4. componentDidMount()
组件渲染之后调用，只调用一次

Updating（更新阶段：涉及5个钩子函数)

1. static getDerivedStateFromProps(props, state)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

2. shouldComponentUpdate(nextProps, nextState)
组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）

3. render()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

4. getSnapshotBeforeUpdate(prevProps, prevState)
触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

5. componentDidUpdate()
组件加载时不调用，组件更新完成后调用

Unmounting（卸载阶段：涉及1个钩子函数）
1. componentWillUnmount()

Error Handling(错误处理)
1. componentDidCatch(error，info)
任何一处的javascript报错会触发

组件的基本写法

新的生命周期

1.React16新的生命周期弃用了componentWillMount、componentWillReceiveProps，componentWillUpdate
2.新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceiveProps，componentWillUpdate）
3.React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17将会删除componentWillMount、componentWillReceiveProps，componentWillUpdate
4.新增了对错误的处理（componentDidCatch）

1.只执行一次： constructor、componentDidMount
2.执行多次：render、getDerivedStateFromProps、shouldComponentUpdate、getSnapshotBeforeUpdate、componentDidUpdate
3.有条件执行：componentWillUnmount

假设组件嵌套关系parent组件中有child组件

不更新dom执行顺序如下

更新dom执行顺序如下

修改父组件的state

修改子组件的state

1.完成前的顺序是从根部到子部，完成时是从子部到根部。（类似于事件机制）
2.子组件setState是不能触发其父组件的生命周期更新函数，只能触发更低一级别的生命周期更新函数。

setState在生命周期中的使用注意事项
1、仅当子组件的props发生变化时getDerivedStateFromProps生命钩子才会被触发。该生命周期会有一个参数nextProps，表示子组件被更新后的props。因此可以在该周期获取最新的props在通过setState更新组件状态。

2、子组件props或state更新都会触发shouldComponentUpdate生命钩子。该生命周期有两个参数nextProps，nextState 表示更新后的props和更新后的state， 该生命周期是整提高组件性能的一个重要函数，它通过判断当前状态与之前状态来返回一个布尔值并决定是否更新视图，如果返回false视图始终不会更新。返回true就会更新视图

3、getSnapshotBeforeUpdate生命周期在shouldComponentUpdate返回true后被触发。在这两个生命周期只要视图更新就会触发，因此不能再这两个生命周期中使用setState。否则会导致死循环。

4、componentDidUpdate生命周期在shouldComponentUpdate返回true后触发。在此生命周期中setState会导致视图再次更新，类似于componentDidMount，因此除非特殊业务需求，否则不建议在此生命周期中使用setState。

5、componentWillUnmount生命周期在组件被卸载后触发，在此生命周期使用setState不会触发。

以下文章来源于魔术师卡颂 ，作者卡颂

点击Parent组件的div，触发更新，Son组件会打印child render!么？

React创建Fiber树时，每个组件对应的fiber都是通过如下两个逻辑之一创建的：
render。即调用render函数，根据返回的JSX创建新的fiber。
bailout。即满足一定条件时，React判断该组件在更新前后没有发生变化，则复用该组件在上一次更新的fiber作为本次更新的fiber。
可以看到，当命中bailout逻辑时，是不会调用render函数的。
所以，Son组件不会打印child render!是因为命中了bailout逻辑。

什么情况下会进入bailout逻辑？当同时满足如下4个条件时：

即本次更新的props（newProps）不等于上次更新的props（oldProps）。
注意这里是全等比较。
我们知道组件render会返回JSX，JSX是React.createElement的语法糖。
所以render的返回结果实际上是React.createElement的执行结果，即一个包含props属性的对象。
即使本次更新与上次更新props中每一项参数都没有变化，但是本次更新是React.createElement的执行结果，是一个全新的props引用，所以oldProps !== newProps。
如果我们使用了PureComponent或Memo，那么在判断是进入render还是bailout时，不会判断oldProps与newProps是否全等，而是会对props内每个属性进行浅比较。

即context的value没有变化。

更新前后fiber.type是否变化，比如div是否变为p。

当前fiber上是否存在更新，如果存在那么更新的优先级是否和本次整棵fiber树调度的优先级一致？
如果一致则进入render逻辑。
就我们的Demo来说，Parent是整棵树中唯一能触发更新的组件（通过调用setCount）。
所以Parent对应的fiber是唯一满足条件4的fiber。

所以，Demo中Son进入bailout逻辑，一定是同时满足以上4个条件。我们一个个来看。
条件2，Demo中没有用到context，满足。
条件3，更新前后type都为Son对应的函数组件，满足。
条件4，Son本身无法触发更新，满足。
所以，重点是条件1。让我们详细来看下。
本次更新开始时，Fiber树存在如下2个fiber

其中FiberRootNode是整个应用的根节点，RootFiber是调用ReactDOM.render创建的fiber。
首先，RootFiber会进入bailout的逻辑，所以返回的App fiber和更新前是一致的。

由于App fiber是RootFiber走bailout逻辑返回的，所以对于App fiber，oldProps === newProps。并且bailout剩下3个条件也满足。
所以App fiber也会走bailout逻辑，返回Parent fiber。

由于更新是Parent fiber触发的，所以他不满足条件4，会走render的逻辑。
接下来是关键
如果render返回的Son是如下形式：

会编译为

执行后返回JSX。
由于props的引用改变，oldProps !== newProps。会走render逻辑。
但是在Demo中Son是如下形式：

其中，props.children是Son对应的JSX，而这里的props是App fiber走bailout逻辑后返回的。
所以Son对应的JSX与上次更新时一致，JSX中保存的props也就一致，满足条件1。
可以看到，Son满足bailout的所有条件，所以不会render。

react新的生命周期函数getDerivedStateFromProps

getDerivedStateFromProps 的 作用 是为了让 props 能更新到组件内部 state 中。他会在 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state ，如果返回 null 则不更新任何内容。但注意在没有内容更新的情况下也一定要返回一个 null 值。不然会报错。

这个生命周期的意思就是从props中获取state，这个生命周期替换了原有的生命周期函数 componentWillReceiveProps , getDerivedStateFromProps ,它
是一个静态函数，也就是说不能通过this来访问class的属性，也不 推荐直接访问属性 。而是通过参数提供的 nextPros 以及 prevState 来进行判断，根据新传入的 props 来映射 state 。
注意： 如果传入的props不影响state，则必须返回一个null，一般尽量写在末尾。

在使用此生命周期时，要注意把传入的 props 值和之前传入的 props 进行比较

ReactNative组件的生命周期多长

这次给大家带来React Native组件的生命周期多长，React Native组件生命周期的注意事项有哪些，下面就是实战案例，一起来看一下。
这里有一篇React Native组件生命周期简介为大家带来，相信这对于大家在React Native组件时候会有很大的帮助，感兴趣的下面一起来看看。
就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下
如图，可以把组件生命周期大致分为三个阶段：
第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。
生命周期回调函数
下面来详细介绍生命周期中的各回调函数。
getDefaultProps
在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState()，来初始化组件的状态。
componentWillMount
然后，准备加载组件，会调用 componentWillMount()，其原型如下：
void componentWillMount()
这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。
componentDidMount
在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成。函数原型如下：
void componentDidMount()
这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。
componentWillReceiveProps
如果组件收到新的属性（props），就会调用 componentWillReceiveProps()，其原型如下：
void componentWillReceiveProps(
object nextProps
)
输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。如下：
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount 》 this.props.likeCount
});
}
shouldComponentUpdate
当组件接收到新的属性和状态改变的话，都会触发调用 shouldComponentUpdate(...)，函数原型如下：
boolean shouldComponentUpdate(
object nextProps, object nextState
)
输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。
默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。
componentWillUpdate
如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下：
void componentWillUpdate(
object nextProps, object nextState
)
输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。
componentDidUpdate
调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：
void componentDidUpdate(
object prevProps, object prevState
)
因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState。
componentWillUnmount
当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下：
void componentWillUnmount()
在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。
总结
到这里，RN 的组件的完整的生命都介绍完了，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格：
生命周期

调用次数

能否使用 setSate()

getDefaultProps

1(全局调用一次)

否

getInitialState

1

否

componentWillMount

1

是

render

》=1

否

componentDidMount

1

是

componentWillReceiveProps

》=0

是

shouldComponentUpdate

》=0

否

componentWillUpdate

》=0

否

componentDidUpdate

》=0

否

componentWillUnmount

1

否

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：

react生命周期，以及各个周期都做了什么

这周开始学习React的生命周期。

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载

因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。
React的生命周期图:

constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。

componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

在此处完成组件的卸载和数据的销毁。

原因：因为你在组件中的ajax请求返回setState,而你组件销毁的时候，请求还未完成，因此会报warning
解决方法：

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

代替componentWillReceiveProps()。
老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。
举个例子:

这两者最大的不同就是:
在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。

代替componentWillUpdate。
常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。
这两者的区别在于：