1. 组件的生命周期概述

• 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等。
• **组件的生命周期：**组件从被创建到挂载到页面上运行，再到组件不用时卸载的过程
• 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
• 钩子函数作用：为开发人员在不同阶段操作组件提供了时机。
• 只有 类组件 才有 生命周期

2. 生命周期的三个阶段

1. 创建时（挂载阶段）

执行时机：组件创建时（页面加载时）
执行顺序：
constructor（）——> render（）——> compoDidMount（）

钩子函数	触发时机	作用
constructor	创建组件时，最先执行	1. 初始化 state 2.为事件处理程序绑定this
rende r	每次组件渲染都会触发	渲染 UI（注意：不能调用 setState（），会造成递归更新）
componDidMount	组件挂载（完成 DOM 渲染）后	1.发送ajax请求，获取远程数据 2. 进行DOM操作

/* 
  组件生命周期
*/

class App extends React.Component {
  constructor(props) {
    super(props)

    // 初始化state
    this.state = {
      count: 0
    }
    // 处理this指向问题

    console.warn('生命周期钩子函数： constructor')
  }

  // 1 进行DOM操作
  // 2 发送ajax请求，获取远程数据
  componentDidMount() {
    // axios.get('http://api.....')

    // const title = document.getElementById('title')
    // console.log(title)
    console.warn('生命周期钩子函数： componentDidMount')
  }

  render() {
    // 错误演示！！！ 不要在render中调用setState()
    // this.setState({
    //   count: 1
    // })
    console.warn('生命周期钩子函数： render')

    return (
      <div>
        <h1 id="title">统计豆豆被打的次数：</h1>
        <button id="btn">打豆豆</button>
      </div>
    )
  }
}

2. 更新时（更新阶段）

• 执行时机：1. setState（） 2. forceUpdate（）3. 组件接收到新的 props
• 说明：以上三者任意一种变化，组件就会重新渲染
• 执行顺序：render（）–> componentDidUpdate（）

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染 UI（与 挂载阶段 是同一个redner ）
componDidUpdate	组件挂载（完成 DOM 渲染）后	1.发送ajax请求，获取远程数据 2. 进行DOM操作 注意：如果要 setState（） 必须放在一个 if 条件中

class App extends React.Component {
  constructor(props) {
    super(props)

    // 初始化state
    this.state = {
      count: 0
    }
  }

  // 打豆豆
  handleClick = () => {
    // 触发setState方法时会触发 render（）
    // this.setState({
    //   count: this.state.count + 1
    // })

    // 强制更新时会触发 render（）
    this.forceUpdate()
  }

  render() {
    console.warn('生命周期钩子函数： render')
    return (
      <div>
        <Counter count={this.state.count} />
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}
// 子组件 Conuter
class Counter extends React.Component {
  render() {
    console.warn('--子组件--生命周期钩子函数： render')
    return <h1>统计豆豆被打的次数：{this.props.count}</h1>
  }
}

3. 卸载时（卸载阶段）

• 执行阶段：组件从页面中消失

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）

class App extends React.Component {
  constructor(props) {
    super(props)

    // 初始化state
    this.state = {
      count: 0
    }
  }

  // 打豆豆
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        {this.state.count > 3 ? (
          <p>豆豆被打死了~</p>
        ) : (
          <Counter count={this.state.count} />
        )}
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

class Counter extends React.Component {
  componentDidMount() {
    // 开启定时器
    this.timerId = setInterval(() => {
      console.log('定时器正在执行~')
    }, 500)
  }

  render() {
    return <h1>统计豆豆被打的次数：{this.props.count}</h1>
  }

  componentWillUnmount() {
    console.warn('生命周期钩子函数： componentWillUnmount')

    // 记得手动清理定时器~不然可能会造成内存泄漏等问题
    clearInterval(this.timerId)
  }
}

不常用的钩子函数介绍

新版完整生命周期钩子函数（了解）：