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