0206旧版生命周期-组件-React

最新推荐文章于 2024-07-09 15:55:17 发布
最新推荐文章于 2024-07-09 15:55:17 发布
阅读量189 收藏
点赞数
文章标签： 旧版组件生命周期 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaogzhen/article/details/129736971
版权

1 前言

React生命周期描述了组件在创建、更新和销毁过程中所经历的不同阶段。这些生命周期方法可以在组件的代码中定义并实现，以便在适当的时候执行自定义操作。

现在我们先学习旧版（16.x及以前）的生命周期函数，然后在对比学习新版（17.x及以后）声明周期方法。

以下是React 16及之前版本中组件的生命周期图示：

在这里插入图片描述

2 示例引出生命周期函数

示例效果如下图1-1所示：

在这里插入图片描述

  • ​ 字体透明度逐渐变淡重复执行
  • 点击移除按钮，组件移除

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1201_引出生命周期</title>
</head>

<body>
  <div id="test"></div>
  <!-- react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    /**
     * 创建组件
     *  生命周期函数：生命周期钩子函数
     */
    class Life extends React.Component {
      // 初始化状态
      state = {
        opacity: 1 // 透明度
      }

      /**
       * 移除组件
       */
      remove = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      /**
       * 组件挂载完毕
       */
      componentDidMount() {
        // 实现字体逐渐变淡效果
        this.timer = setInterval(() => {
          let {opacity} = this.state
          // 字体透明度为0即透明后，重新赋值1
          if (opacity <= 0) {
            opacity = 1
          }
          opacity -= 0.1
          this.setState({opacity})
        }, 200);
      }

      /**
       * 组件卸载之前
       */
      componentWillUnmount() {
        // 清除定时器
        clearInterval(this.timer)
      }

      /**
       * 初始化渲染，状态更新重新渲染
       */
      render() {
        return (
          <div>
            <h2 style={{opacity: this.state.opacity}}>学习React组件生命周期</h2><br/>
            <button onClick={this.remove}>移除</button>
          </div>
        )
      }
      
    }

    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<Life/>, document.getElementById('test'))

  </script>
</body>

</html>
  • ReactDOM.unmountComponentAtNode()为卸载组件API
  • 定时器要求组件挂载之后创建，创建一次；在组件卸载之前清除。
  • componentDidMount()：组件挂载之后执行
  • componentWillUnmount()：组件卸载之前执行
  • React还提供了很多其他生命周期函数

生命周期函数也称生命周期钩子函数，生命周期钩子。React会在合适的时间点，调用相应的生命周期函数。

3 生命周期

React 16之前的生命周期被分为三个阶段：

  • 挂载（Mounting）阶段
  • 更新（Updating）阶段
  • 卸载（Unmounting）阶段

3 挂载阶段

挂载阶段（Mounting）：这是组件在实例化并插入DOM中的过程。在这个阶段，React会依次调用以下方法：

  • constructor()：组件的构造函数，在组件创建时调用。
  • componentWillMount()：组件插入DOM之前被调用。
  • render()：生成虚拟DOM并返回JSX。
  • componentDidMount()：组件插入DOM后被调用。

示例代码如下3-1所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1202_生命周期(旧)</title>
</head>

<body>
  <div id="test"></div>
  <!-- react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    /**
     * 创建组件
     *  生命周期函数：生命周期钩子函数
     */
    class Count extends React.Component {
      constructor(props) {
        console.log('Count === constructor');
        super(props)
        // 初始化状态
        this.state = {
          count: 1 // 计数
        }
      }


      /**
       * +1
       */
      add = () => {
        this.setState({count: this.state.count + 1})
      }

      /**
       * 卸载组件
       */
       remove = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      /**
       * 组件将要挂载
       */
      componentWillMount() {
        console.log('Count === componentWillMount');
      }

      /**
       * 组件挂载完毕
       */
      componentDidMount() {
        console.log('Count === componentDidMount');
      }

      /**
       * 组件卸载之前
       */
      componentWillUnmount() {
        console.log('Count === componentWillUnmount');
      }

      /**
       * 初始化渲染，状态更新重新渲染
       */
      render() {
        console.log('Count === render');
        const { count } = this.state
        return (
          <div>
            <h2>当前计数：{count}</h2><br />
            <button onClick={this.add}>点我+1</button>
          </div>
        )
      }
    }

    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<Count />, document.getElementById('test'))

  </script>
</body>

</html>

如下图3-1所示：

在这里插入图片描述

4 更新阶段

在更新阶段，组件的props或state被修改，导致重新渲染。以下是更新阶段的生命周期方法：

  • componentWillReceiveProps()：用于在组件接收到新的 props 时进行操作。它会在组件接收到新的 props 之前被调用，并且可以根据新的 props 来更新组件的状态。
  • shouldComponentUpdate(nextProps, nextState)：在组件更新时调用，决定是否需要重新渲染组件，可以优化性能，默认返回true。
  • componentWillUpdate()：作用是让组件在更新之前进行一些准备工作，例如计算一些属性或状态的值，或者更新组件之前进行一些必要的清理操作。但需要注意的是，在此方法中不能直接更新组件的状态或DOM，因为此时组件尚未被更新。
  • render()：在组件更新时调用，返回虚拟DOM，用于渲染到页面。
  • componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后调用，可以执行DOM操作或发起网络请求等操作。

第一种更新，setState()引起的更新

  • shouldComponentUpdate返回true与返回false的区别

以代码3-1为例，额外添加shouldComponentUpdate函数代码如下；

shouldComponentUpdate(nextProps, nextState) {
  console.log('count === shouldComponentUpdate :', nextProps, '----', nextState);
  return true;
}

返回true时，如下图4-1所示：

在这里插入图片描述

返回false时，如下图4-2所示：

在这里插入图片描述

声明周期函数shouldComponentUpdate()默认返回true，该方法之后的生命周期函数正常执行；当返回false时，不在执行后续的生命周期函数。

第二种更新，执行forceUpdate()后的更新

​ 示例，上述基础在添加一个按钮，点击执行forceUpdate，示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1203_updating-生命周期(旧)</title>
</head>

<body>
  <div id="test"></div>
  <!-- react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    /**
     * 创建组件
     *  生命周期函数：生命周期钩子函数
     */
    class Count extends React.Component {
      constructor(props) {
        console.log('Count === constructor');
        super(props)
        // 初始化状态
        this.state = {
          count: 1 // 计数
        }
      }


      /**
       * +1
       */
      add = () => {
        this.setState({count: this.state.count + 1})
      }

      /**
       * 不更新状态，强制更新
       */
      force = () => {
        console.log('Count ==== forceUpate');
        this.forceUpdate()
      }

      /**
       * 卸载组件
       */
       remove = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      /**
       * 组件将要挂载
       */
      componentWillMount() {
        console.log('Count === componentWillMount');
      }

      /**
       * 组件挂载完毕
       */
      componentDidMount() {
        console.log('Count === componentDidMount');
      }
      
      /**
       * 组件是否应该被更新
       */
      shouldComponentUpdate(nextProps, nextState) {
        console.log('count === shouldComponentUpdate :', nextProps, '----', nextState);
        return true;
      }

      /**
       * 组件将要被更新之前
       */
      componentWillUpdate(nextProps, nextState) {
        console.log('count === componentWillUpdate :', nextProps, '----', nextState);
      }

      /**
       * 组件将要被更新之后
       */
       componentDidUpdate(prevProps, prevState) {
        console.log('count === componentDidUpdate :', prevProps, '----', prevState);
      }

      /**
       * 组件卸载之前
       */
      componentWillUnmount() {
        console.log('Count === componentWillUnmount');
      }

      /**
       * 初始化渲染，状态更新重新渲染
       */
      render() {
        console.log('Count === render');
        const { count } = this.state
        return (
          <div>
            <h2>当前计数：{count}</h2><br />
            <button onClick={this.add}>点我+1</button><br/>
            <button onClick={this.force}>不更改状态强制更新</button>
            </div>
        )
      }
    }

    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<Count />, document.getElementById('test'))

  </script>
</body>

</html>

点击示例效果如下图4-3所示：

在这里插入图片描述

执行组件的forceUpdate()方法，不受shouldComponentUpdate函数的影响。

第三种更新，父子组件中父组件更新传值引起的子组件更新。

实例代码如下4-4代码所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1204_parent-son-生命周期(旧)</title>
</head>

<body>
  <div id="test"></div>
  <!-- react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    /**
     * 创建组件
     *  生命周期函数：生命周期钩子函数
     */
    class SuperCar extends React.Component {
      state = {carName: '第一代奔驰'}

      changeCar = () => {
        this.setState({carName: '第二代奔驰'})
      }
      
      

      /**
       * 初始化渲染，状态更新重新渲染
       */
      render() {
        
        const { carName } = this.state
        return (
          <div>
            <h2>我的父组件</h2><br />
            <button onClick={this.changeCar}>换车</button><br/>
            <SubCar carName={carName}/>
            </div>
        )
      }
    }

    class SubCar extends React.Component {
      
      
      /**
       * 组件将要接受更新props
       */
       componentWillReceiveProps(nextProps) {
        console.log('SubCar === componentWillReceiveProps', '---', nextProps);
      }
      
      /**
       * 组件将要挂载
       */
       componentWillMount() {
        console.log('SubCar === componentWillMount');
      }

      /**
       * 组件挂载完毕
       */
      componentDidMount() {
        console.log('SubCar === componentDidMount');
      }
      
      /**
       * 组件是否应该被更新
       */
      shouldComponentUpdate(nextProps, nextState) {
        console.log('SubCar === shouldComponentUpdate :', nextProps, '----', nextState);
        return true;
      }

      /**
       * 组件将要被更新之前
       */
      componentWillUpdate(nextProps, nextState) {
        console.log('SubCar === componentWillUpdate :', nextProps, '----', nextState);
      }

      /**
       * 组件将要被更新之后
       */
       componentDidUpdate(prevProps, prevState) {
        console.log('SubCar === componentDidUpdate :', prevProps, '----', prevState);
      }

      /**
       * 组件卸载之前
       */
      componentWillUnmount() {
        console.log('SubCar === componentWillUnmount');
      }

      render() {
        console.log('SubCar === render');
        return (
        <div>
          <h2>我是子组件，接收到的是{this.props['carName']}</h2>
         </div>
        )
      }
    }

    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<SuperCar />, document.getElementById('test'))

  </script>
</body>

</html>

效果如下图4-4所示：

在这里插入图片描述

componentWillReceiveProps默认第一次不会执行，再次更新props才会执行。

5 卸载阶段

通过ReactDOM.unmountComponentAtNode(组件)卸载组件，在卸载之前回调生命周期函数componentWillUnmount()

在#2中有示例，这里不在演示。

目前旧版本React组件的生命周期讲解完毕，下面我们对比讲解下新版React组件的生命周期。

后记

❓QQ:806797785

⭐️源代码仓库地址：https://gitee.com/gaogzhen/react-study

参考：

[1]尚硅谷React教程（2022加更，B站超火react教程）[CP/OL].2020-12-15.p37-p42.

[2]React官网[CP/OL].

[2]ChatGPT[CP/OL].

gaog2zh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
react-解释ReactHooks组件的新生命周期的流程图
08-14
这个“react-解释ReactHooks组件的新生命周期的流程图”很可能是为了帮助开发者理解如何在函数组件中使用Hooks来管理状态和执行生命周期操作。 在React的旧版本中，我们主要通过类组件来处理状态和生命周期方法，如...
react-react面试题之生命周期的不同阶段.zip
03-20
React 16.3版本之后，为了提高性能和避免潜在的不良副作用，一些旧的生命周期方法，如`componentWillMount`, `componentWillReceiveProps`, 和 `componentWillUpdate`，已被废弃，取而代之的是新的静态方法`...
react学习之生命周期（一）旧版本16.8以前
weixin_44119268的博客
04-26 438
生命周期就像是人的一生，在特定的时候担任特定的角色。 本文介绍的是旧版本react的生命周期 从图中可以看出，生命周期可以分为初始化阶段、更新阶段和组件卸载阶段 初始化阶段 constructor() // 构造器 componentWillMount() // 组件将要挂载的钩子 render() componentDidMount() // 组件挂载完毕的钩子 16.3版本后componentWillMount改名为UNSAFE_componentWillMount在以后的版本可能后清除 .
React体系06-React 组件的新旧生命周期
2402_85402030的博客
06-08 749
生命周期含义：从组件出生到更新、改变、销毁（创建\更新\销毁）的整个阶段。生命周期的钩子函数含义：组件的每个阶段都伴随着一些方法，就是生命周期的钩子函数,我们就是通过控制这些生命周期函数从而控制组件。生命周期意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因TIPS只有类组件才有生命周期。
React-5-组件生命周期
xiao_yu_gan的博客
09-13 365
React组件生命周期、React钩子函数
React生命周期（新-旧）
比鲁斯大人的博客
08-24 292
① 是什么？组件从创建到挂载页面上运行，再到组件不用时卸载的过程，叫生命周期，只有类组件才有生命周期。②作用学习组件的生命周期，有助于理解组件的运行方式，完成更复杂的组件更能、分析组件错误原因等。① 是什么？生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。②作用为开发人员在不同阶段操作组件提供了时机。
react学习—旧版生命周期
xun__xing的博客
04-18 296
旧版生命周期1、旧版生命周期1.初始化阶段constructor2.组件即将挂载componentWillMount3.虚拟DOM render4.虚拟DOM已挂载到页面成为真实DOM5.componentWillReceiveProps6.shouldComponentUpdate7.componentWillUpdate8.componentDidUpdate9.componentWillUnmount 生命周期：组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供
react生命周期-旧
pinganaaa的博客
04-06 257
react生命周期-旧 示意图 组件各生命周期钩子 componentWillMount：组件将要挂载时执行 componentDidMount：组件已经挂载后执行，一般在这个钩子里做一些初始化的事，发送请求，设置定时器…，孩子出生 render:只要组件变化就会触发的函数，孩子成长 componentWillReceiveProps:组件将要父组件传来的属性时执行 shouldComponentUpdate:判断是否需要组件更新 componentWillUpdate:组件将要更新时执行 compone
react基础学习（004-组件生命周期）
二三的博客
03-23 1241
React组件生命周期理解旧生命周期1. 组件挂载时的执行过程：2. 组件更新时的执行过程:1. setState() 更新state（正常更新）2. 调用forceUpdate()时（强制更新）3. 父组件render(父组件渲染)3. 生命周期阶段1. 初始化阶段2. 更新阶段3. 卸载组件新生命周期 理解 组件对象从创建到死亡，它会经历特定阶段 react组件对象包含一系列钩子函数（生命周期回调函数），在特定的时刻调用 我们在定义组件时，在特定的生命周期回调函数中做特定的事情 旧生命周期 com
React - 组件的生命周期
技术共享，共同进步！
02-18 127
React 组件的生命周期一. 旧版本生命周期二. 新版本生命周期三. 新旧生命周期对比 一. 旧版本生命周期 constructor(props) ：构造器 完成了React数据的初始化 componentWillMount ：组件将要挂载的钩子 componentDidMount ：组件挂载完毕的钩子 componentWillReceiveProp(props) ：组件将要接收组件新的props的钩子 shouldComponentUpdate ：控制组件是否继续更新 必须返回值 true/fals
【React】深入理解React组件生命周期----图文详解（含代码）
xuxuii的博客
05-30 3028
文章目录📌组件的生命周期1️⃣ 理解2️⃣ 案例3️⃣生命周期流程图（旧）A. 实现setState 和 forceUpdate 流程B. 实现组件之间传值流程4️⃣ 对比新旧生命周期5️⃣ 生命周期流程图（新）A. getDerivedStateFromProps（几乎用不到，使用场景及其罕见）B. getSnapshotBeforeUpdateC.getSnapshotBeforeUpdate使用场景6️⃣ 重要的三个钩子7️⃣ 即将废弃的钩子 📌组件的生命周期 先来看个例子引出生命周期 理...
react-reactscrollbarReact的滚动条组件
08-15
2. **轻量级**：`react-scrollbar`是为React设计的，因此它充分利用了React的状态管理和生命周期方法，确保了组件的轻量化和高性能。 3. **响应式设计**：滚动条可以根据屏幕尺寸或设备类型自动调整，适应不同环境...
react-native-popup-menu：React Native的弹出菜单组件
01-31
菜单选项，位置，动画可以像受控组件一样工作，也可以不受控制不同的生命周期挂钩RTL布局支持社区驱动的功能： 支持UWP，react-native-web和react-native-desktop 打字稿定义我们感谢社区维护超出我们范围的功能。...
react-React组件可以安全地在渲染阶段将数据保存到localStorage
08-14
1. **生命周期方法**：在React组件的生命周期方法中使用`localStorage`是最常见的方式。比如，在`componentDidMount`方法中设置数据，确保只有在组件加载完成后才执行。而在`componentWillUnmount`中移除数据，避免...
FullCalendar的使用，react日历组件
最新发布
前端小菜鸟也有人起的博客
07-09 83
FullCalendar的使用，react日历组件
React@16.x（50）路由v5.x（15）源码（7）- 实现 Link 和 NavLink
qq_40147756的博客
07-06 364
实现 Link 和 NavLink
react umi把将file文件数据转成二进制流数据格式
u014651093的专栏
07-09 61
把将file文件数据转成二进制流数据格式
react使用markdown进行展示
lx233
07-02 350
注意文档要放在public下才能读取。有一些文档非常长，但是又要挨个设置样式，直接用。然后css不用全局，用id即可。最后是我的markdwon样式。组件库 - marked。
react生命周期函数旧版
10-29
旧版的 React 生命周期函数包括 componentWillMount、componentWillReceiveProps、componentWillUpdate、componentDidMount、componentDidUpdate、componentWillUnmount 等。但是，如果您以任何方式使用旧的 React ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值