React生命周期（新-旧）

已于 2024-01-09 11:32:13 修改
阅读量401 收藏
点赞数
分类专栏： 前端 # React 文章标签： react.js javascript 前端 搜索引擎
于 2023-08-24 18:41:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15911201/article/details/132470945
版权
前端 同时被 2 个专栏收录
36 篇文章 2 订阅
订阅专栏
React
20 篇文章 0 订阅
订阅专栏

文章目录

前言

1、生命周期介绍

① 是什么？

组件从创建到挂载页面上运行，再到组件不用时卸载的过程，叫生命周期，只有类组件才有生命周期。

②作用

学习组件的生命周期，有助于理解组件的运行方式，完成更复杂的组件更能、分析组件错误原因等。

2、钩子函数介绍

① 是什么？

生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。

②作用

为开发人员在不同阶段操作组件提供了时机。

生命周期的三个阶段

三阶段分为：创建时、更新时和卸载时。
👉点击此（生命周期结构图）

一、生命周期（旧）

生命周期（旧）

1.初始化阶段(挂载阶段)

① constructor

Ⅰ、执行

组件实例被创建并初始化时触发

Ⅱ、能做什么

  • 通过给 this.state 赋值对象来初始化内部 state。
  • 为事件处理函数绑定实例
② componentWillMount

Ⅰ、执行

componentWillMount() 在挂载之前被调用。

Ⅱ、能做什么

用于准备渲染前的工作

③ render

Ⅰ、执行

根据组件的props和state

Ⅱ、能做什么

渲染UI，返回需要渲染的元素结构

④ componentDidMount

Ⅰ、执行

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里

Ⅱ、能做什么

这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅

2.更新阶段

① shouldComponentUpdate

Ⅰ、执行

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。

Ⅱ、能做什么

根据shouldComponentUpdate的返回值，判断组件的输出是否受但钱state或peops更改影响。默认行为是state每次发生变化组件都会重新渲染。大部分情况下，应该遵循默认行为。

② componentWillUpdate

Ⅰ、执行

组件即将被重新渲染前触发

Ⅱ、能做什么

用于准备更新前的工作

③ render

Ⅰ、执行

根据组件的props和state

Ⅱ、能做什么

渲染UI，返回需要渲染的元素结构

④ componentDidUpdate

Ⅰ、执行

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

Ⅱ、能做什么

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。

3.卸载阶段

① componentWillUnmount

Ⅰ、执行

componentWillUnmount() 会在组件卸载及销毁之前直接调用。

Ⅱ、能做什么

在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

总结图

二、生命周期（新）

生命周期（新）

1.初始化阶段(挂载阶段)

① constructor

Ⅰ、执行

组件实例被创建并初始化时触发

Ⅱ、能做什么

  • 通过给 this.state 赋值对象来初始化内部 state。
  • 为事件处理函数绑定实例
② getDerivedStateFromProps

Ⅰ、执行

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。

Ⅱ、能做什么

它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

③ render

Ⅰ、执行

根据组件的props和state

Ⅱ、能做什么

渲染UI，返回需要渲染的元素结构

④ componentDidMount

Ⅰ、执行

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里

Ⅱ、能做什么

这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅

2.更新阶段

① getDerivedStateFromProps

Ⅰ、执行

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。

Ⅱ、能做什么

它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

② shouldComponentUpdate

Ⅰ、执行

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。

Ⅱ、能做什么

根据shouldComponentUpdate的返回值，判断组件的输出是否受但钱state或peops更改影响。默认行为是state每次发生变化组件都会重新渲染。大部分情况下，应该遵循默认行为。

③ render

Ⅰ、执行

根据组件的props和state

Ⅱ、能做什么

渲染UI，返回需要渲染的元素结构

④ getSnapshotBeforeUpdate

Ⅰ、执行

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。

Ⅱ、能做什么

它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。

⑤ componentDidUpdate

Ⅰ、执行

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

Ⅱ、能做什么

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。

3.卸载阶段

① componentWillUnmount

Ⅰ、执行

componentWillUnmount() 会在组件卸载及销毁之前直接调用。

Ⅱ、能做什么

在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

总结图

三、生命周期新旧整体图片

生命周期

四、三个被遗弃的生命周期函数

以下生命周期方法标记为“过时”。这些方法任然有效，但不建议在新代码中使用它们。使用这被遗弃的生命周期需要在前面加上UNSAFE_，但是不加也没事（建议加上）。

1、UNSAFE_componentWillMount()

Ⅰ、执行

UNSAFE_componentWillMount() 是 React 组件生命周期中的一个方法，用于在组件挂载（即被渲染到 DOM 中）之前调用。

Ⅱ、能做什么

在组件更新之前执行一些操作。它接收两个参数：nextProps和nextState，分别表示组件即将更新的props和state。

2、UNSAFE_componentWillReceiveProps()

Ⅰ、执行

用于在组件接收新的props时触发。

Ⅱ、能做什么

允许组件根据即将接收到的新props进行一些操作，例如更新组件的状态或执行一些副作用操作。在这个方法中，可以比较当前props和即将接收到的props的差异，并根据需要进行相应的处理。

3、UNSAFE_componentWillMount()

Ⅰ、执行

当组件的props或state发生变化，并且在重新渲染之前，UNSAFE_componentWillUpdate()方法会被调用。

Ⅱ、能做什么

UNSAFE_componentWillUpdate()的作用是在组件更新之前执行一些操作。它接收两个参数：nextProps和nextState，分别表示组件即将更新的props和state。

五、新增的两个生命周期函数

1、getDerivedStateFromProps

执行：

static getDerivedStateFromProps(props, state)
在组件创建时和更新时的render方法之前调用。

作用：

它应该返回一个对象来更新状态，或者返回null来不更新任何内容。

2、getSnapshotBeforeUpdate

执行：

getSnapshotBeforeUpdate()
被调用于render之后，可以读取但无法使用DOM的时候。

作用：

它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。

Mr.BoBo.
关注
专栏目录
【react全家桶学习】react的 (新/旧) 生命周期（重点）
蜗牛~~
06-27 8578
相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、
react之新旧生命周期
Mr_RedStar的博客
04-15 506
React生命周期前言一、旧版生命周期二、新版生命周期总结 前言 生命周期仅存在于类组件中。 旧版生命周期：react版本 < 16.0.0 旧版生命周期：react版本 >= 16.0.0 提示：以下是本篇文章正文内容，下面案例可供参考 一、旧版生命周期 如图： 二、新版生命周期 图为16.3的生命周期： 图为16.3之后的生命周期，相比之前的新版，主要是getDerivedStateFromProps的调整： 新版常用的钩子函数： 总结 提示：这里对文章进行总结： 例如：以上就是今
React 生命周期（新、旧）及 案例
YuLong的博客
09-14 923
文章目录生命周期旧生命周期新生命周期生命周期示例——时钟 生命周期 组件从创建到死亡它会经历一些特定的阶段。 React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。 在定义组件时，会在特定的生命周期回调函数中，做特定的工作 旧生命周期 生命周期的三个阶段（旧） 三个阶段： 初始化阶段: 由 ReactDOM.render() 触发——初次渲染 constructor() componentWillMount() render() =====> 必须使用的一个 comp
React 组件的生命周期方法
最新发布
My_wife_QBL的博客
08-04 1062
挂载（Mounting）：组件被创建并插入到 DOM 中。更新（Updating）：组件的状态或属性发生变化，导致组件重新渲染。卸载（Unmounting）：组件从 DOM 中删除。在每个阶段，React 提供了一些特定的生命周期方法，开发者可以在这些方法中执行自定义逻辑。React 组件的生命周期方法是控制组件行为的重要工具。了解这些方法的调用顺序以及如何在每个阶段执行特定操作，可以帮助开发者编写更加高效和可维护的代码。
React生命周期新旧对比
qq_42711864的博客
04-11 387
16之前 16版本后
react新老生命周期总结
qq_38980678的博客
06-06 317
一.初始化阶段 –即将挂载,render之前最后一次修改状态的机会 render–渲染页面，只能访问this.props和this.state,不允许修改状态 componentDidMount—挂载完成，render完成可以访问和修改页面DOM 注：初始阶段生命周期只在初始化时调用一次 二.运行中阶段 :父组件修改属性触发，可接收到最新的props shouldComponentUpdata(nextProps,nextState):是否允许页面更新，默认返回true，返回false会阻止render调用
react生命周期新旧对比
qq_60976312的博客
06-30 446
react生命周期新旧对比
React之新旧生命周期对比
wanggang182007的博客
04-24 308
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>新旧react生命周期对比</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --&gt...
React生命周期（旧详解）
weixin_52984349的博客
11-01 502
React生命周期（旧详解）
react基础学习资料-生命周期-redux-fetch接口
11-28
在学习React时，"react学习图"可能是组件生命周期的可视化表示，有助于直观理解各个方法的执行顺序。"reactѧϰͼ"可能包含了React组件结构、组件间通信方式等基础知识的图表，帮助初学者快速上手。 总的来说，这份...
react-解释ReactHooks组件的新生命周期的流程图
08-14
React Hooks 是React 16.8版本引入的一个重大特性，它允许我们在不编写类组件的情况下使用状态和其他React生命周期方法。这个“react-解释ReactHooks组件的新生命周期的流程图”很可能是为了帮助开发者理解如何在...
React组件的生命周期
07-20
React组件的生命周期
老生常谈js-react组件生命周期
10-19
对于React 16.3及以上版本，新增了两个静态方法static getDerivedStateFromProps和getSnapshotBeforeUpdate用于替代一些旧的生命周期方法。 理解React组件生命周期及其方法，对于优化组件渲染性能和管理组件状态都...
React的生命周期
大熊的博客
01-03 412
1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmount () 2. 更新过程 2.1. componentWillReceiveProps (nextProps) 2.2.shouldComponentUpdate(nextProps,nex...
React 新旧生命周期的区别
凯扣叮博客
12-27 410
在React v16.3中，迎来了新的生命周期改动。
react生命周期(新)
weixin_43613849的博客
10-25 1773
react新旧生命周期区别 ①旧生命周期删除三个钩子：componentWillMount、componentWillUpdate、componentWillReceiveProps这三个钩子在17.版本使用时要加上前缀UNSAFE_，即UNSAFE_componentWillMoun否则会有警告甚至报错。增加使用成本，减少程序员使用。这是因为这些生命周期方法经常被误解和滥用，UNSAFE_不是指不安全，而是在未来版本中（maybe 18.）可能出现bug，特别是异步渲染中。实际很少使用这三个钩子，基本.
react 生命周期图
aoyao9093的博客
06-06 116
1.react v16版本生命周期 2.react v17 (还未发布)，生命周期将被改动，下面红框的部分就是会被删除的部分，注意调整！ 转载于:https://www.cnblogs.com/ZengYunChun/p/9144096.html...
React:新旧生命周期及其对比
Continue的博客
07-09 636
文章目录概述生命周期（旧）挂载时更新时父组件rendersetStateforceUpdate卸载时生命周期（新）挂载时更新时卸载时新旧生命周期的对比 概述 不管是vue还是React，它都有一个生命周期，它描述了组件从创建到销毁的整个生命过程，其中含有有很多的钩子函数连接而成。这里主要讲React新旧生命周期，以及他们的对比 生命周期（旧） 周期图如下 其中左边是挂载时，右边是更新时，下边是更新时 挂载时 可以看出挂载时的更新数据顺序依次如下 1）constructor：构造器 2）component
react 生命周期最新试例讲解
09-09
React的生命周期方法在最新版本（React 16.3及以上）中有所改变。下面是React生命周期的最新示例： 1. constructor：组件实例化时调用，用于初始化state和绑定事件处理程序。 ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'John' }; this.handleClick = this.handleClick.bind(this); } handleClick() { // 处理点击事件 } render() { return ( <div> <h1>Hello, {this.state.name}</h1> <button onClick={this.handleClick}>Click me</button> </div> ); } } ``` 2. static getDerivedStateFromProps：在props更改时调用，用于根据新的props更新state（不常用）。 ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: props.name }; } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.name !== prevState.name) { return { name: nextProps.name }; } return null; } render() { return <h1>Hello, {this.state.name}</h1>; } } ``` 3. componentDidMount：组件渲染完成后调用，可以进行异步操作和DOM操作。 ```jsx class MyComponent extends React.Component { componentDidMount() { // 发起异步请求或其他副作用操作 } render() { return <h1>Hello, world!</h1>; } } ``` 4. shouldComponentUpdate：接收新的props或state时调用，返回一个布尔值，决定是否触发组件更新（优化性能时常用）。 ```jsx class MyComponent extends React.Component { shouldComponentUpdate(nextProps, nextState) { // 根据新的props或state决定是否更新组件 if (nextProps.someProp !== this.props.someProp) { return true; } return false; } render() { // 组件渲染逻辑 } } ``` 5. componentDidUpdate：组件更新后调用，可以进行DOM操作或发起异步请求（需要谨慎使用，避免导致无限循环）。 ```jsx class MyComponent extends React.Component { componentDidUpdate(prevProps, prevState) { // 根据prevProps和prevState进行一些操作 } render() { // 组件渲染逻辑 } } ``` 6. componentWillUnmount：组件卸载前调用，用于清理定时器、取消订阅等操作。 ```jsx class MyComponent extends React.Component { componentWillUnmount() { // 清理操作 } render() { // 组件渲染逻辑 } } ``` 这些是React生命周期的最新示例，它们可以帮助你更好地理解和使用React组件的生命周期方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值