简述 React 的生命周期

ops/2024/12/26 20:00:03/

发现宝藏

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。


React 生命周期是指一个组件从创建到销毁的过程,React 提供了一些生命周期方法,让开发者在特定的时刻执行代码。生命周期主要可以分为 类组件生命周期函数组件生命周期 两类。这里主要讲解类组件的生命周期方法,函数组件的生命周期会通过 Hooks 实现。

类组件生命周期

React 类组件的生命周期分为三大阶段:挂载(Mounting)更新(Updating)卸载(Unmounting)。每个阶段都有对应的生命周期方法。

1. 挂载阶段 (Mounting)

组件被创建并插入到 DOM 中的过程。

  • constructor(props)
    组件实例化时调用,通常在这里初始化 state 和绑定事件处理函数。

    constructor(props) {super(props);this.state = { count: 0 };
    }
    
  • static getDerivedStateFromProps(nextProps, nextState)
    在每次渲染前调用,无论是组件的初始化渲染还是更新时都会调用。
    这个方法返回一个对象,React 会合并这个对象到当前组件的 state 中。
    该方法是静态的,不能访问组件实例(this)。

    static getDerivedStateFromProps(nextProps, nextState) {if (nextProps.value !== nextState.value) {return { value: nextProps.value };}return null;
    }
    
  • render()
    该方法是类组件必须实现的方法,负责渲染 UI。它不应该修改 state 或执行副作用操作。

    render() {return <div>{this.state.count}</div>;
    }
    
  • componentDidMount()
    组件挂载完成后调用,只会执行一次。通常用于发起异步请求或设置订阅等操作。

    componentDidMount() {console.log('Component mounted!');
    }
    
2. 更新阶段 (Updating)

组件在其 state 或 props 发生变化时,会重新渲染。

  • static getDerivedStateFromProps(nextProps, nextState)
    同挂载阶段,组件每次更新时都会调用这个方法。

  • shouldComponentUpdate(nextProps, nextState)
    在组件重新渲染之前调用,可以通过返回 truefalse 来控制是否更新组件的渲染。如果返回 false,React 会跳过更新过程。

    shouldComponentUpdate(nextProps, nextState) {return nextState.count !== this.state.count;
    }
    
  • render()
    与挂载阶段相同,组件每次更新时都会重新调用 render 方法。

  • getSnapshotBeforeUpdate(prevProps, prevState)
    在渲染输出 (DOM 更新) 之前调用,可以获取一些渲染前的信息(比如滚动位置)。
    返回的值会作为 componentDidUpdate 方法的第三个参数。

    getSnapshotBeforeUpdate(prevProps, prevState) {return document.getElementById('myDiv').scrollTop;
    }
    
  • componentDidUpdate(prevProps, prevState, snapshot)
    组件更新后被调用,常用于执行依赖于 DOM 更新的操作。snapshotgetSnapshotBeforeUpdate 返回的值。

    componentDidUpdate(prevProps, prevState, snapshot) {console.log('Component updated!');
    }
    
3. 卸载阶段 (Unmounting)

组件从 DOM 中移除的阶段。

  • componentWillUnmount()
    组件被卸载之前调用,通常在这里进行清理操作,如取消定时器、取消网络请求、移除事件监听等。
    componentWillUnmount() {console.log('Component will unmount');
    }
    

4. 错误处理 (Error Handling)

  • static getDerivedStateFromError(error)
    当组件抛出错误时,会调用该方法,可以用于更新 state 以呈现备用 UI。

    static getDerivedStateFromError(error) {return { hasError: true };
    }
    
  • componentDidCatch(error, info)
    该方法用来捕获错误信息,可以用于日志记录。

    componentDidCatch(error, info) {console.error('Error caught:', error);
    }
    

函数组件生命周期 (React Hooks)

在 React 16.8 以后,函数组件可以通过 Hooks 来模拟类组件的生命周期。

  1. useState — 管理组件的状态。
  2. useEffect — 用于执行副作用,相当于类组件中的 componentDidMountcomponentDidUpdatecomponentWillUnmount 的合并。
  3. useContext — 获取 context 数据。
  4. useRef — 创建引用并在组件重新渲染时保持不变。

示例:使用 useEffect 代替生命周期方法

import React, { useState, useEffect } from 'react';function MyComponent() {const [count, setCount] = useState(0);// 相当于 componentDidMount 和 componentDidUpdateuseEffect(() => {console.log('Component rendered or updated');return () => {// 相当于 componentWillUnmountconsole.log('Cleanup before unmount');};}, [count]); // 依赖 count,当 count 改变时重新执行return (<div><p>{count}</p><button onClick={() => setCount(count + 1)}>Increase</button></div>);
}

总结

  • 挂载阶段constructorgetDerivedStateFromPropsrendercomponentDidMount
  • 更新阶段getDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdate
  • 卸载阶段componentWillUnmount
  • 错误处理getDerivedStateFromErrorcomponentDidCatch

随着 React Hooks 的引入,函数组件可以通过 useEffectuseState 等 Hooks 管理生命周期,提供了更简洁和灵活的方式。


http://www.ppmy.cn/ops/144791.html

相关文章

《三角洲行动》游戏运行时提示“缺失kernel32.dll”:问题解析与解决方案

《三角洲行动》游戏运行时提示“缺失kernel32.dll”&#xff1a;问题解析与解决方案 作为软件开发领域的一名从业者&#xff0c;我深知电脑游戏运行过程中可能遇到的各种挑战&#xff0c;尤其是文件丢失、文件损坏以及系统报错等问题。今天&#xff0c;我将以经典游戏《三角洲…

中小学教室多媒体电脑安全登录解决方案

中小学教室多媒体电脑面临学生随意登录的问题&#xff0c;主要涉及到设备使用、网络安全、教学秩序等多个方面。以下是对这一问题的详细分析&#xff1a; 一、设备使用问题 1. 设备损坏风险 学生随意登录可能导致多媒体电脑设备过度使用&#xff0c;增加设备损坏的风险。不当…

vue2版本elementUI的clearable属性和DateTimePicker 下拉框的清空功能冲突

1. 问题 在使用DateTimePicker 日期时间选择器控件时&#xff0c;有些场景下需要设置数据不可清理&#xff0c;按照常规操作直接设置属性 clearable 的值为false即可&#xff0c;但是发现下拉框中仍有按钮“清空”&#xff0c;这就跟我们的业务需求冲突了。 2. 思考 纵观el…

STM32 高级 谈一下IPV4/默认网关/子网掩码/DNS服务器/MAC

首先可以通过 winr->输入cmd->输入ipconfig 命令可以查看计算机的各种地址 IPV4&#xff1a;是互联网协议第 4 版&#xff08;Internet Protocol version 4&#xff09;所使用的地址。它是一个 32 位的二进制数字&#xff0c;通常被分为 4 个 8 位的部分&#xff…

数据结构与算法学习笔记----匈牙利算法

数据结构与算法学习笔记----匈牙利算法 author: 明月清了个风 first publish time: 2024.12.22 ps⛹️‍♀️这题的算法思路在题目中&#xff0c;没有写在题目前面&#xff0c;注释十分详细 Acwing 861. 二分图的最大匹配 [原题链接](861. 二分图的最大匹配 - AcWing题库) …

谷歌浏览器的网络安全检测工具介绍

作为全球最受欢迎的浏览器之一&#xff0c;谷歌浏览器不仅提供了快速、便捷的浏览体验&#xff0c;还内置了一系列强大的网络安全检测工具&#xff0c;帮助用户识别潜在的网络威胁&#xff0c;保护个人隐私和数据安全。本文将详细介绍谷歌浏览器中的几项关键网络安全检测功能&a…

【python高级】342-TCP服务器开发流程

CS模式&#xff1a;客户端-服务端模式 TCP客户端开发流程介绍&#xff08;五步&#xff09;&#xff08;C端&#xff09; 1.创建客户端套接字对象 2.和服务端套接字建立连接 3.发送数据 4.接收数据 5.关闭客户端套接字 TCP服务端开发流程&#xff08;七步&#xff09;&#xf…

小程序app封装公用顶部筛选区uv-drop-down

参考ui:DropDown 下拉筛选 | 我的资料管理-uv-ui 是全面兼容vue32、nvue、app、h5、小程序等多端的uni-app生态框架 样式示例&#xff1a; 封装公用文件代码 dropDownTemplete <template><!-- 顶部下拉筛选区封装公用组件 --><view><uv-drop-down ref&…