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

安宇雨 - 随手采集
2024-01-29 12:36:05
随手采集
0000-未整理-等待研究

React 组件生命周期-概述

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

组件的生命周期是指组件从被创建到挂在到页面中运行，在到组件不用时卸载组件
注意：只有类组件才有生命周期，函数组件没有生命周期(类组件需要实例化，函数组件不需要)

在这里插入图片描述

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

钩子函数

触发时间

作用

constructor

组件创建时最先执行（组件初始化时只执行一次）

1. 初始化 state 2.创建 Ref 3.使用 bind 解决 this 指向问题

render

组件每次渲染都会触发

渲染 UI（不能在 render 里面调用 setState）

componentDidMount

组件挂载后（DOM 渲染完成）执行，初始化时执行一次

1.发送网络请求 2.DOM 操作

执行顺序:
constructor -> render -> componentDidMount
实例:

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

实例

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

实例

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

原网址: 访问
创建于: 2024-01-29 12:35:41
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到