React生命周期函数

生命周期

• 创建时：

1. 每挂载一个组件，会先执行constructor构造方法来创建组件
2. 紧接着调用render函数，获取要渲染的DOM结构（jsx），并且开始渲染DOM
3. 当组件挂载成功（DOM渲染完成），会执行componentDidMount生命周期函数

• 更新时：

1. 当我们通过修改props，或者调用setState修改内部状态，或者直接调用forceUpdate时会重新调用render函数，进行更新操作
2. 当更新完成时，会回调componentDidUpdate生命周期函数

• 卸载时：

1. 当我们的组件不再使用，会被从DOM中移除掉（卸载）
2. 这个时候会回调componentWillUnmount生命周期函数

constructor(props)

• 进行初始化state (给this.state赋值)
• 为事件绑定实例 （this）

componentDidMount()

• 组件挂载后（插入 DOM 树中）立即调用
• 依赖于DOM的操作可以在这里进行
• 在此处发送网络请求就最好的地方 (官方建议)
• 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）

componentDidUpdate(prevProps, prevState, snapshot)

• 会在更新后会被立即调用，首次渲染不会执行此方法
• 当组件更新后，可以在此处对 DOM 进行操作；
• 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

componentWillUnmount()

• 会在组件卸载及销毁之前直接调用
• 在此方法中执行必要的清理操作；例如，清除 timer，取消网络请求或清除在 componentDidMount()中创建的订阅等；

验证生命周期函数

import React, { Component } from 'react';

class TestCpn extends Component {
  render() {
    return <h2>TestCpn</h2>
  }
  componentWillUnmount() {
    console.log("组件卸载完成 ----- TestCpn componentWillUnmount");
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
    console.log("调用constructor方法");
  }

  render() {
    console.log("调用render方法")
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        {/* this.state.counter > 5, 卸载TestCpn组件 */}
        {this.state.counter <= 5 && <TestCpn/>}
        <button onClick={e => this.increment()}>+1</button>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  componentDidMount() {
    console.log("组件挂载完成 ----- 调用componentDidMount方法");
  }

  componentDidUpdate() {
    console.log("更新数据完成 ----- 调用componentDidUpdate方法");
  }

  componentWillUnmount() {
    console.log("组件卸载完成 ----- 调用componentWillUnmount方法");
  }
}

image.png END