React 生命周期详解

React 组件的生命周期是组件在创建、更新和销毁过程中所经历的一系列阶段。每个阶段都会触发特定的生命周期方法,开发者可以在这些方法中执行特定的操作。React 的生命周期方法可以分为三个阶段:挂载阶段、更新阶段和卸载阶段。

1. 挂载阶段

在组件首次被创建并插入到 DOM 中的过程中,会依次调用以下生命周期方法:

  • constructor(props): 构造函数,最先被执行,在这里设置组件的初始状态以及绑定事件处理函数。
  • static getDerivedStateFromProps(props, state): 这是一个静态方法,用于在接收新的 props 时同步 state 状态。它返回一个对象用于更新 state,或者返回 null 表示不更新任何内容。
  • render(): 这个方法负责渲染组件并返回需要显示的内容。
  • componentDidMount(): 组件被挂载到 DOM 上后,该方法立即被调用。通常在这里进行网络请求、订阅事件等操作。

2. 更新阶段

当组件的 props 发生变化或组件内部状态发生变化时,会触发更新阶段,涉及以下生命周期方法:

  • static getDerivedStateFromProps(props, state): 与挂载阶段相同,用于在接收新的 props 时同步 state 状态。
  • shouldComponentUpdate(nextProps, nextState): 这个方法返回一个布尔值,用于判断是否需要继续执行后面的渲染流程。根据 props 和 state 的变化,可以实现性能优化。
  • render(): 重新渲染组件。
  • getSnapshotBeforeUpdate(prevProps, prevState): 在 DOM 更新之前被调用,用于捕获 DOM 更新前的某些信息(如滚动位置)。返回的值会传递给 componentDidUpdate
  • componentDidUpdate(prevProps, prevState, snapshot): 在 DOM 更新完成后被调用。可以在这里执行依赖于 DOM 更新的操作,如获取更新后的 DOM 元素尺寸。

3. 卸载阶段

当组件从 DOM 中移除时,会触发卸载阶段,涉及以下生命周期方法:

  • componentWillUnmount(): 在组件卸载及销毁之前被调用。通常在这里执行清理操作,如取消网络请求、移除事件监听等。

需要注意的是,React 16.3 版本引入了新的生命周期方法,并将一些过时的方法(如 componentWillMountcomponentWillReceiveProps 和 componentWillUpdate)标记为不安全。在新的类组件中,建议使用新的生命周期方法,或者使用函数组件与 Hooks 替代类组件。

相关推荐

  1. React 生命周期详解

    2024-01-28 09:56:01       31 阅读
  2. React生命周期

    2024-01-28 09:56:01       12 阅读
  3. React生命周期

    2024-01-28 09:56:01       8 阅读
  4. Reactreact生命周期

    2024-01-28 09:56:01       20 阅读
  5. Vue生命周期详解

    2024-01-28 09:56:01       37 阅读
  6. UniApp 生命周期详解

    2024-01-28 09:56:01       34 阅读
  7. React 组件生命周期

    2024-01-28 09:56:01       25 阅读
  8. React生命周期总结

    2024-01-28 09:56:01       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-28 09:56:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-28 09:56:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-28 09:56:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-28 09:56:01       20 阅读

热门阅读

  1. OPenCv基础代码

    2024-01-28 09:56:01       28 阅读
  2. BloonsTD6 游戏拆解

    2024-01-28 09:56:01       28 阅读
  3. Web 安全之点击劫持(Clickjacking)攻击详解

    2024-01-28 09:56:01       33 阅读
  4. php函数 二

    2024-01-28 09:56:01       28 阅读
  5. 在React中使用React.createRef:更优雅的DOM引用方式

    2024-01-28 09:56:01       34 阅读
  6. ubuntu和树莓派下vim插件管理

    2024-01-28 09:56:01       28 阅读
  7. MySQL SQL 注入

    2024-01-28 09:56:01       36 阅读