React 组件生命周期-概述、生命周期钩子函数 - 挂载时、生命周期钩子函数 - 更新时、生命周期钩子函数 - 卸载时

React 组件生命周期-概述

学习目标: 能够说出组件的生命周期一共几个阶段

组件的生命周期是指组件从被创建到挂在到页面中运行,在到组件不用时卸载组件

注意:只有类组件才有生命周期,函数组件没有生命周期(类组件需要实例化,函数组件不需要)

生命周期钩子函数 - 挂载时

钩子函数 触发时间 作用
constructor 组件创建时最先执行(组件初始化时只执行一次) 1. 初始化 state 2.创建 Ref 3.使用 bind 解决 this 指向问题
render 组件每次渲染都会触发 渲染 UI(不能在 render 里面调用 setState)
componentDidMount 组件挂载后(DOM 渲染完成)执行,初始化时执行一次 1.发送网络请求 2.DOM 操作

执行顺序:

constructor -> render -> componentDidMount
实例:

js 复制代码
import React from 'react'

class App extends React.Component {
  state = {
    count: 0,
  }
  constructor() {
    super()
    console.log('constructor')
  }
  componentDidMount() {
    console.log('componentDidMount')
  }
  add = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }
  render() {
    console.log('render')
    return (
      <div>
        this is render
        <button onClick={this.add}>{this.state.count}</button>
      </div>
    )
  }
}
export default App

生命周期钩子函数 - 更新时

学习目标: 能够说出组件更新阶段的钩子函数以及执行时机

钩子函数 触发时间 作用
render 每次组件渲染都会触发 渲染 UI(与挂载阶段是同一个 render)
componentDidUpdate 组价更新后(DOM 渲染完) DOM 操作,可以获取更新后的 DOM 内容,**不要直接调用 setState
**
实例
js 复制代码
import React from 'react'

class App extends React.Component {
  state = {
    count: 0,
  }
  constructor() {
    super()
    console.log('constructor')
  }
  componentDidMount() {
    console.log('componentDidMount')
  }
  componentDidUpdate() {
    console.log('componentDidUpdate')
  }
  add = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }
  render() {
    console.log('render')
    return (
      <div>
        this is render
        <button onClick={this.add}>{this.state.count}</button>
      </div>
    )
  }
}
export default App

生命周期钩子函数 - 卸载时

学习目标: 能够说出组件卸载(组件销毁)阶段的钩子函数以及执行时机

钩子函数 触发时间 作用
componentwillUnmount
实例
js 复制代码
import React from 'react'
class Test extends React.Component {
  //如果要用到数据需要去影响识图,就写入state
  //如果不需要影响识图,就定义为普通实例属性
  times = null
  componentDidMount() {
    this.times = setInterval(() => {
      console.log('定时器已开启')
    }, 1000)
  }
  componentWillUnmount() {
    console.log('componentWillUnmount')
    // 清楚定时器
    clearInterval(this.times)
  }
  render() {
    return <div>this is Test</div>
  }
}
class App extends React.Component {
  state = {
    flag: true,
  }
  constructor() {
    super()
    console.log('constructor')
  }
  componentDidMount() {
    console.log('componentDidMount')
  }
  componentDidUpdate() {
    console.log('componentDidUpdate')
  }
  add = () => {
    this.setState({
      flag: !this.state.flag,
    })
  }
  render() {
    console.log('render')
    return (
      <div>
        {this.state.flag ? <Test /> : null}
        <button onClick={this.add}>click</button>
      </div>
    )
  }
}
export default App
相关推荐
鱼樱前端1 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig2 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix2 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易2 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao2 小时前
网安-XSS-pikachu
前端·安全·网络安全