• React 生命周期函数总结【CV】

    我们使用 React 来开发项目时候，每个 react 组件都包含生命周期方法，我们可以在这些方法当中执行一些业务逻辑。生命周期方法包含了如下的几个阶段:

    挂载：当组件实例被创建并插入 DOM 中时

    • constructor()
    • static getDerivedStateFromProps()
    • render()
    • componentDidMount()

    更新：当组件的 props 或 state 发生变化时会触发更新

    • static getDerivedStateFromProps()
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate()
    • componentDidUpdate()

    卸载: 当组件从 DOM 中移除时会调用

    • componentWillUnmount()

    下图更加清晰地展示了组件在不同阶段调用的方法：

    React 生命周期

    方法是否必须说明
    render()必须render() 方法是 class 组件中唯一必须实现的方法，调用此方法才能把JSX内容渲染到页面上
    constructor()非必须constructor(props)，可以在构造函数里面初始化 state 或进行方法绑定
    componentDidMount()非必须会在组件挂载后（插入 DOM 树中）立即调用，可以在里面发送 http 请求、设置定时器等操作
    componentDidUpdate()非必须componentDidUpdate(prevProps, prevState, snapshot),会在更新后会被立即调用，但是首次渲染不会执行此方法。注意：在此方面里面调用 setState，应该避免出现死循环，可以将条件语句里面更新 state
    componentWillUnmount()非必须会在组件卸载及销毁之前直接调用，可以在里面清除定时器、取消大的对象的引用等操作。注意：应避免调用setState()
    shouldComponentUpdate()非必须shouldComponentUpdate(nextProps, nextState)，根据 nextProps 和 nextState 这两个参数来判断当前组件是否可以更新
    static getDerivedStateFromProps()非必须static getDerivedStateFromProps(props, state)，会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
    getSnapshotBeforeUpdate()非必须getSnapshotBeforeUpdate(prevProps, prevState)在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
    getDerivedStateFromError()非必须static getDerivedStateFromError(error)，会在后代组件抛出错误后被调用，一般用于错误捕获
    componentDidCatch()非必须componentDidCatch(error, info)，会在后代组件抛出错误后被调用，一般用于错误捕获

    过时的生命周期方法

    方法是否必须说明
    UNSAFE_componentWillMount()非必须改方法在 render() 之前调用，之前名为 componentWillMount。该名称将继续使用至 React 17
    UNSAFE_componentWillReceiveProps()非必须父组件重新渲染时候会调用此方法，之前名为 componentWillReceiveProps。该名称将继续使用至 React 17
    UNSAFE_componentWillUpdate()非必须当组件收到新的 props 或 state 时，会在渲染之前调用此方法，之前名为 componentWillUpdate。该名称将继续使用至 React 17
  • 相关阅读:
    Cookie、Session与Token的区别理解
    （十七）数据结构-图的应用-最小生成树
    小米被曝提议“禁止安卓手机提取 APK 文件”，Google：我拒绝
    决策树模型(3)决策树的生成与剪枝
    【力扣周赛】第 360 场周赛（贪心 & ⭐树上倍增）
    AI新工具(20240306) mlx-swift-chat Mac运行本地模型；Comflowyspace开源AI图像和视频生成工具
    软硬件协同仿真 l 原理及主要组成部分概述
    决策树与随机森林
    codeigniter 4.1.3 gadget chain
    Java资产管理
  • 原文地址：https://blog.csdn.net/shaojiuli/article/details/126007622