React——02组件生命周期

目录

挂载 

更新

卸载

 总结如下：

---

本章节将讨论一下React的生命周期

组建的生命周期可以分为三个状态：

• Mounting（挂载）：已经插入真实的Dom
• Updating（更新）：正在被重新渲染的状态
• Unmounting（卸载）：已经移除真实的Dom

---

看下面一张图，网址在这里

---

挂载

当组件被创建并插入在Dom中的时候，调用生命周期的顺序如下：

---

constructor(): 在 React 组件挂载之前，会调用它的构造函数。
child render()：渲染过程中遇到Child组件 输出child render()
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

 

---

注意：render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

更新

每次当组件中的state或者是props发生变化时，组件就会重新进行更新。

触发更新时，组件更新的生命周期调用顺序如下：

---

getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
componentDidUpdate(): 在更新后会被立即调用。

---

注意： render() 方法也是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

卸载

当组件从 DOM 中移除时会调用如下方法：

---

componentWillUnmount(): 在组件卸载及销毁之前直接调用。

---

下面是演示代码 ：

index.js部分

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  // constructor钩子函数 初始化state或处理this
  constructor() {
    super();
    console.log("constructor()");
    this.state = {
      num: 0,
    };

    // this.add = this.add.bind(this)
  }

  //
  render() {
    console.log("render()");

    // 注意 不能调用setState
    // this.setState({

    // })

    return (
      <>
        {this.state.num !== 2 ? <Child num={this.state.num} /> : <h1>hello</h1>}
        <button onClick={this.handleClick}>+1</button>
      </>
    );
  }

  handleClick = () => {
    this.setState({
      num: this.state.num + 1,
    });

    //this.forceUpdate();
  };
  // 组件挂载后触发 进行dom操作或发送ajax请求
  componentDidMount() {
    console.log("componentDidMount()");
  }
}

class Child extends Component {
  render() {
    console.log("child render()");
    return <h1 id="app">welcome to beijing {this.props.num}</h1>;
  }
  componentDidUpdate(prevProps) {
    console.log(
      "child componentDidMount()",
      document.getElementById("app").innerHTML
    );
    // 不能直接用 this.setState({});

    // 假如使用 setState() 配合if语句
    console.log(prevProps); // 更新前props属性值
    if (prevProps.num !== this.props.num) {
      this.setState({});
    }
  }

  // 卸载阶段钩子函数-执行资源清理工作如关闭定时器。事件解绑等
  componentWillUnmount() {
    console.log("componentWillUnmount()");
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

第一次页面显示的生命周期有

当点击按钮时出现的效果有：

再次点击更新时：

再次点击：

总结如下：

第一次渲染App组件 先执行constructor钩子函数输出constructor() 然后执行render输出render()，渲染过程中遇到Child组件 输出child render()把子组件挂载阶段的钩子函数执行完毕 执行父组件的componentDidMount()

点击按钮，父组件状态num被改变，引起父组件重新渲染render()->子组件也会更新child render()->child componentDidMount() ,{num: 0},条件成立 执行setState()->child render()->child componentDidMount() {num: 1} 条件不成立 不会执行setState