react生命周期

最新推荐文章于 2025-04-17 09:56:26 发布

Nikki_u

最新推荐文章于 2025-04-17 09:56:26 发布

阅读量1.2k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/125043170

版权

本文详细介绍了React组件的挂载、更新和卸载三个阶段的生命周期方法，包括constructor、render、componentDidMount、componentDidUpdate和componentWillUnmount等。在挂载阶段，主要进行初始化操作，如设置state、发送网络请求；更新阶段处理状态更新和DOM操作；卸载阶段则进行资源清理。同时，文章提到了过时和新增的生命周期方法，并提及了数据持久化的概念。

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

组件生命周期-挂载阶段

执行时机：组件创建时（页面加载时）

constructor-创建组件时，最先执行-作用：1、初始化state 2、创建ref 3、使用bind解决this指向问题

render-每次组件渲染都会触发-作用：渲染UI（注意：在render内部不能调用setState()）

**componentDidMount-组挂载后（DOM渲染完成）-作用：1、发送网络请求 2、DOM操作

组件生命周期-更新阶段

执行时机：1、setState() 2、forceUpdate() 3、组件接收到新的props

render-每次组件渲染都会触发-作用：渲染UI

componentDidUpdate-组件更新（完成DOM渲染）后-作用：DOM操作，可以获取到更新后的DOM内容，不要调用setState

组件生命周期-卸载阶段

执行时机：组件即将要卸载时

**componentWillUnmount-组件要卸载时-作用：自定义的一些需要停止的程序（例如：定时器、自定义window监听事件）

class Life extends React.Component{
  state={opacity:1}
  unMount=()=>{
    // 卸载组件
    // clearInterval(this.timer)
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  }
  // 组件挂载完毕
  componentDidMount(){
    console.log('componentDidMount');
    this.timer=setInterval(() => {
      let {opacity}=this.state
      opacity-=0.1
      if(opacity<=0) opacity=1
      this.setState({opacity})
    }, 200);
  }
  // 组件将要卸载
  componentWillUnmount(){
    console.log('componentWillUnmount');
    clearInterval(this.timer)
  }
  render(){
    console.log('render');
    return (
      <div>
        <p style={{opacity:this.state.opacity}}>羊咩咩</p>
        <button onClick={this.unMount}>点击让他吃oo</button>
        </div>
    )
  }
}
ReactDOM.render(<Life/>,document.getElementById('test'))

1、组件挂载完毕

一般做初始化的事，例如：开启定时器、发起网络请求、订阅消息

componentWillMount(){}

2、组件将要卸载

一般在这个钩子里里面做一些收尾的事，例如：关闭定时器、取消订阅消息

componentWillUnmount(){}

3、组件渲染render

过时生命周期： ① componentWillMount ② componentWillReceiveProps ③ componentWillUpdate

即将过时生命周期：(在新代码中我们应该避免使用它们) ① UNSAFE_componentWillMount ② UNSAFE_componentWillReceivePorps ③ UNSAFE_componentWillUpdate

新增生命周期 ① getDerivedStateFromProps ② getSnapShotBeforeUpdate ③ getDerivedStateFromError ④ componentDidCatch

import { Component } from 'react'

class List extends Component {
  timeId = -1
  handleListener = () => {
    console.log(44444)
  }
  componentDidMount() {
    // 打印是否监听到DOM元素
    console.log('componentDidMount', document.querySelector('#uu').innerHTML)
    // 设定时器
    this.timeId = setInterval(() => {
      console.log(66)
    }, 500)
    // window绑定事件 监听画面大小
    window.addEventListener('resize', this.handleListener)
  }
  componentWillUnmount() {
    console.log(999999999)
    // 清除定时器
    clearInterval(this.timeId)
    // window解绑监听事件
    window.removeEventListener('resize', this.handleListener)
  }
  render() {
    console.log('render')
    return (
        <div id="uu">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
    )
  }
}
class Parent extends Component {
  state = {
    isShow: true
  }
  render() {
    console.log(this.state);
    return (
      <>
        {this.state.isShow ? <List></List> : <p>nn</p>}
        <button onClick={() => this.setState({ isShow: false})}>点击</button>
      </>
    )
  }
}
export default Parent

数据持久化

import { Component } from 'react'

class Parent extends Component {
  state = {
    lis:3
  }
  // 数据持久化
  componentDidMount(){
    const lis=JSON.parse(localStorage.getItem('set-list')||'[]')
    this.setState({lis})
  }
  componentDidUpdate(){
    localStorage.setItem('set-list',JSON.stringify(this.state.lis))
  }
  render() {
    console.log(this.state);
    return (
      <>
        <button onClick={() => this.setState({lis:5})}>点击</button>
      </>
    )
  }
}
export default Parent