React 组件的生命周期

无敌培根卷

已于 2022-02-20 15:59:15 修改

阅读量929

点赞数

文章标签： react.js javascript 前端

于 2022-01-05 15:51:10 首次发布

本文链接：https://blog.csdn.net/weixin_44501366/article/details/122322353

版权

本文介绍了React组件的生命周期，包括创建时（挂载阶段）、更新时（更新阶段）和卸载时（卸载阶段）的详细过程。在挂载阶段，组件依次执行constructor、render和componentDidMount；在更新阶段，组件在重新渲染时调用render和componentDidUpdate；而在卸载阶段，当组件从页面中移除时，会执行特定的方法。了解这些生命周期钩子函数对于实现复杂的组件功能和调试非常重要。

摘要由CSDN通过智能技术生成

1. 组件的生命周期概述

意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等。
组件的生命周期:组件从被创建到挂载到页面上运行，再到组件不用时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
钩子函数作用：为开发人员在不同阶段操作组件提供了时机。
只有 类组件 才有生命周期

2. 生命周期的三个阶段

在这里插入图片描述

1. 创建时（挂载阶段）

执行时机：组件创建时（页面加载时）
执行顺序：
constructor（）——> render（）——> componentDidMount（）

钩子函数	触发时机	作用
constructor	创建组件时，最先执行	1. 初始化 state 2.为事件处理程序绑定this
render	每次组件渲染都会触发	渲染 UI（注意：不能调用 setState（），会造成递归更新）
componentDidMount	组件挂载（完成 DOM 渲染）后	1.发送ajax请求，获取远程数据 2. 进行DOM操作

/* 
  组件生命周期
*/

class App extends React.Component {
   
  constructor(props) {
   
    super(props)

    // 初始化state
    this.state = {
   
      count: 0
    }
    
    // 处理this指向问题
    console.warn('生命周期钩子函数： constructor')
  }

  // 1 进行DOM操作
  // 2 发送ajax请求，获取远程数据
  componentDidMount() {
   
    // axios.get('http://api.....')

    // const title = document.getElementById('title')
    // console.log(title)
    console.warn('生命周期钩子函数： componentDidMount')
  }

  render() {
   
    // 错误演示！！！ 不要在render中调用setState()