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 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架