react组件三种基本生命周期：挂载、卸载、更新的时机及什么时候渲染

组件挂载

触发时机：React 组件构建，将 DOM 元素插入页面。

hooks行为：1. 组件根据val的值执行useState(val)的初始化；2. 执行一次useEffect的内容

触发渲染的三种情形之1

组件更新

1. 调用setState方法

触发时机：组件本身调用setState方法

hooks行为：1. 更新state状态；2. 根据useEffect的依赖项决定是否执行一次useEffect

另外，如果 class 组件 this.setState(null)，传入null不会触发组件更新

触发渲染的三种情形之2

2. 父组件重新渲染

触发时机：父组件重新渲染

只要父组件重新渲染了，即使传入子组件的 props 未发生变化，那么子组件也会重新渲染，进而触发 render。是触发渲染的三种情形之3

Demo：当点击按钮的时候，Child 组件的 props 并没有发生变化，但是也触发了 render 方法： 

const Child = () => {
  console.log("child render");
  return<div>child</div>;
};

class App extends React.Component {
  state = {
    a: 1
  };

  render() {
    console.log("render");
    return (
      <React.Fragement>
        <p>{this.state.a}</p>
        <button
          onClick={() => {
            this.setState({ a: 1 });
          }}
        >
          Click me
        </button>
        <button onClick={() => this.setState(null)}>setState null</button>
        <Child />
      </React.Fragement>
    );
  }
}

组件卸载

触发时机：当组件从 DOM 中移除时。

hooks行为：卸载事件会触发 class 组件的 componentWillUnmount() 方法，或函数组件的 useEffect Hook 的返回方法。

​​​

参考内容：

原文：性能！！让你的 React 组件跑得再快一点，作者：天泽，来源：政采云前端团队