React基础学习-Day08

🕗 发布于 2024-07-18 16:35 react.js 学习前端

React基础学习-Day08

React生命周期（旧）（新）（函数组件）

（旧）

在 React 16 版本之前，React 使用了一套不同的生命周期方法。这些生命周期方法在 React 16 中仍然可以使用，但被标记为将来可能会被废弃，建议尽量使用新的生命周期方法来代替。以下是旧版 React 生命周期方法的主要分类和用法：

1. 挂载阶段（Mounting Phase）

这些生命周期方法在组件实例被创建并插入 DOM 中时被调用。

constructor(props)：
- 构造函数，用于初始化组件的状态（state）和绑定事件处理方法。通常用来进行一些初始化操作。
componentWillMount()：
- 在组件即将被挂载到 DOM 之前调用，仅在服务端渲染时才会被调用。不推荐使用，可以使用 constructor() 或 componentDidMount() 替代。
render()：
- 必需的方法，返回组件的 JSX 表示。描述了组件的 UI 呈现。
componentDidMount()：
- 在组件挂载后（插入 DOM 树中后）立即调用。通常用于发起网络请求或设置订阅。

2. 更新阶段（Updating Phase）

这些生命周期方法在组件更新时被调用，比如 props 或 state 的改变。

componentWillReceiveProps(nextProps)：
- 在组件接收到新的 props 时被调用。不推荐使用，可以使用 static getDerivedStateFromProps() 或 componentDidUpdate() 替代。
shouldComponentUpdate(nextProps, nextState)：
- 允许开发者手动判断是否重新渲染组件。默认返回 true，表示总是重新渲染。
componentWillUpdate(nextProps, nextState)：
- 在组件即将更新（重新渲染）时被调用。不推荐使用，可以使用 getSnapshotBeforeUpdate() 或 componentDidUpdate() 替代。
render()：
- 更新 UI。
componentDidUpdate(prevProps, prevState)：
- 在组件更新后立即调用。通常用于处理 DOM 更新之后的操作。

3. 卸载阶段（Unmounting Phase）

这些生命周期方法在组件从 DOM 中移除时被调用。

componentWillUnmount()

：
- 在组件被卸载和销毁之前调用。通常用于清理定时器、取消网络请求或清理订阅。

4. 错误处理阶段（Error Handling Phase）

这些生命周期方法在组件在渲染过程中、子组件树中的任何地方抛出错误时被调用。

componentDidCatch(error, info)

：
- 在后代组件抛出错误后调用。用于记录错误信息等。

（新）

在 React 16.3 版本及之后，引入了一些新的生命周期方法，同时对一些旧的生命周期方法进行了调整和标记为过时。这些变化主要是为了解决 React 在异步渲染和性能优化方面的一些挑战。以下是主要的新生命周期方法和使用方式：

1. 挂载阶段（Mounting Phase）

这些生命周期方法在组件实例被创建并插入 DOM 中时被调用。

constructor(props)：
- 构造函数，用于初始化组件的状态（state）和绑定事件处理方法。通常用来进行一些初始化操作。
static getDerivedStateFromProps(props, state)：
- 在组件挂载（初始化）和更新（接收新的 props）时都会被调用。用于根据 props 更新 state。必须是静态方法，并返回一个对象来更新 state，或者返回 null 表示不更新 state。
render()：
- 必需的方法，返回组件的 JSX 表示。描述了组件的 UI 呈现。
componentDidMount()：
- 在组件挂载后（插入 DOM 树中后）立即调用。通常用于发起网络请求或设置订阅。

2. 更新阶段（Updating Phase）

这些生命周期方法在组件更新时被调用，比如 props 或 state 的改变。

static getDerivedStateFromProps(props, state)：
- 在组件挂载后和每次接收新的 props 时都会被调用，用于根据 props 更新 state。
shouldComponentUpdate(nextProps, nextState)：
- 允许开发者手动判断是否重新渲染组件。默认返回 true，表示总是重新渲染。
render()：
- 更新 UI。
getSnapshotBeforeUpdate(prevProps, prevState)：
- 在组件更新（重新渲染）之前被调用。它可以捕获当前 DOM 的某些信息，返回的值将作为 componentDidUpdate() 的第三个参数传递给它。
componentDidUpdate(prevProps, prevState, snapshot)：
- 在组件更新后立即调用。通常用于处理 DOM 更新之后的操作。

3. 卸载阶段（Unmounting Phase）

这些生命周期方法在组件从 DOM 中移除时被调用。

componentWillUnmount()

：
- 在组件被卸载和销毁之前调用。通常用于清理定时器、取消网络请求或清理订阅。

4. 错误处理阶段（Error Handling Phase）

这些生命周期方法在组件在渲染过程中、子组件树中的任何地方抛出错误时被调用。

static getDerivedStateFromError(error)：
- 在后代组件抛出错误后被调用，用于更新 state 以显示备用 UI。
componentDidCatch(error, info)：
- 在后代组件抛出错误后调用。用于记录错误信息等。

函数式组件中如何模拟生命周期

如果你想使用 useEffect Hook 来分别模拟类组件中的不同生命周期方法，可以这样做：

模拟 `componentDidMount`

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码将在组件挂载后执行，相当于 componentDidMount
    console.log('Component mounted');
    
    // 如果需要清理操作，可以返回一个函数，在组件卸载时执行
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组作为第二个参数表示只在组件挂载时执行一次

  return (
    <div>
      <p>Component content</p>
    </div>
  );
}

export default MyComponent;

模拟 `componentDidUpdate`

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  // useEffect 模拟 componentDidUpdate
  useEffect(() => {
    // 这里的代码将在每次组件更新时执行，相当于 componentDidUpdate
    console.log('Component updated');

    // 如果有需要，在这里可以执行特定于更新的操作

    // 注意：这里不返回清理函数，因为这里的 useEffect 不需要在组件卸载时执行
  }, [count]); // 指定 count 为依赖项，只有 count 更新时才会执行 effect

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default MyComponent;

模拟 `componentWillUnmount`

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码将在组件挂载后执行，相当于 componentDidMount
    console.log('Component mounted');
    
    // 返回一个清理函数，在组件卸载时执行
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组作为第二个参数表示只在组件挂载时执行一次

  return (
    <div>
      <p>Component content</p>
    </div>
  );
}

export default MyComponent;

在上面的例子中：

第一个 useEffect 模拟了 componentDidMount 生命周期方法，它在组件挂载时执行一次，并且可以返回一个清理函数。
第二个 useEffect 则模拟了 componentDidUpdate 生命周期方法，它在组件更新时执行，依赖于 count 状态的变化。
第三个 useEffect 演示了如何在组件卸载时执行清理操作，类似于 componentWillUnmount。

通过使用 useEffect Hook，你可以更灵活地管理组件的副作用和生命周期行为，而不需要依赖类组件中的生命周期方法。

原文地址：https://blog.csdn.net/weixin_38647954/article/details/140525426

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Linux 之 ln 硬链接和软链接
下一篇：linux中常见的协议、服务端口整理汇总

[NewStarCTF 2023]include 0。0--详细解析
使用php伪协议时要考虑目标服务器是否开启了相关配置。php://filter有很多变种，目前还不是很熟悉这个伪协议，明天总结一下。
阅读更多2024-11-18
Ubuntu22.04LTS 部署前后端分离项目
（1）将dist上传到云服务器，如我的路径是/home/fcty/frontend/dist这样。（3）将编写好的配置文件复制到对应的/etc/nginx/sites-enabled/下，（2）编写
阅读更多2024-11-18
externally-managed-environment
系统范围：使用 APT。隔离环境：使用虚拟环境或pipx。当前用户：使用--user参数。希望这篇文章能帮助你解决报错问题，并成功完成模块安装！
阅读更多2024-11-18
CTFHub-hate_php
用取反操作，发现环境限制，也不行。利用通配符来匹配文件路径。不能用定义变量的做法。
阅读更多2024-11-18
ThinkPHP中使用ajax接收json数据的方法
在ThinkPHP框架中，使用AJAX接收JSON数据通常涉及前端和后端的交互。前端通过AJAX发送JSON数据到后端，后端控制器接收并处理这些数据，然后可能返回一些响应数据。
阅读更多2024-11-18
计算机网络学习笔记——第一章、概述
学习计算机网络的笔记
阅读更多2024-11-18
基于isSpring的PPT转换
打开 ispring SDK 编辑器，编辑器文件目录默认为 C:\Program Files\iSpring\Platform Ultimate 8\PPT Conversion SDK\CodeBu
阅读更多2024-11-18
flume对kafka中数据的导入导出、datax对mysql数据库数据的抽取
抽取trans_info.json的数据到kafka上，对其中的tr_flag=0的数据进行过滤抛弃，只保留正常的状态数据在pom.xml中放入依赖包：使用java代码，自定义拦截器：@Overrid
阅读更多2024-11-18
基于Kafka2.1解读Consumer原理
Producer的逻辑是把消息往外发，所以Sender运行的越快，client这边为了维护batch而消耗的资源（内存和CPU越少）；而如果Consumer也这么干，实际消费速度赶不上fetch速度的
阅读更多2024-11-18
【开源免费】基于Vue和SpringBoot的私人健身与教练预约管理系统（附论文）
基于java技术、springboot框架、B/S机构、Mysql数据库设计并实现了私人健身与教练预约管理系统。系统主要包括首页，个人中心，用户管理，教练管理，健身项目管理，项目分类，教练信息管理，教
阅读更多2024-11-18

React基础学习-Day08