React生命周期

最新推荐文章于 2024-10-02 19:52:35 发布

原创最新推荐文章于 2024-10-02 19:52:35 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #react

这篇博客详细介绍了React组件的生命周期，包括挂载、更新和卸载三个阶段，并提到了在React 16之后被废弃的生命周期方法。文章还展示了React 16.8+版本中的新生命周期方法，如getDerivedStateFromProps和componentDidMount，并讨论了它们的作用。此外，还涵盖了组件优化、状态管理和DOM操作等相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期概念广义来说生命周期泛指自然界和人类社会中各种客观事物的阶段性变化及其规律在 React 框架中则用来描述组件挂载更新卸载三个阶段。

React生命周期指的是组件从创建到卸载的整个过程每个过程都有对应的钩子函数它主要有以下几个阶段挂载阶段组件实例被创建和插入Dom树的过程，更新阶段组件被重新渲染的过程，卸载阶段组件从Dom树中被删除的过程。

React 16之后有三个生命周期被废弃：

componentWillMount
componentWillReceiveProps
componentWillUpdate

因为这些生命周期方法容易被误解和滥用。

React 16.8+的生命周期分为三个阶段，分别是挂载阶段、更新阶段、卸载阶段。

import React, { Component } from 'react'
import Children from './components/Children'
import './icon.css'

export class App extends Component {
  constructor(...props) {
    super(...props)
    this.state = { name: 123 }
    console.log('1组件加载完成')
  }

  static getDerivedStateFromProps(props, state) {
    console.log('2组件加载完成')
    return { a: 1 }
  }

  render() {
    console.log('3组件加载完成')
    return (
      <>
        {this.state.name === '123' ? <Children></Children> : null}
        <img src="/state/logo192.png" alt="" />
        <i className="iconfont icon-sousuo2"></i>
        <button
          onClick={() => {
            this.setState({ name: '999' })
          }}
        >
          bbb
        </button>
      </>
    )
  }

  componentDidMount() {
    console.log('4组件加载完成')
  }
}

export default App

// 生命周期

// 生命周期存在于类组件

// 函数组件使用hooks生命周期

// 生命周期分为三大阶段

// 实例期（初始化）

// 存在期（更新期）

// 销毁期（卸载期）

// 实例期：

// 1.getDefaultProps 获取默认的props

// 2.getInitialState 获取初始的state

// 3.static getDerivedStateFromProps

// 它的作用：返回一个对象，这个对象的数据会直接初始到state中