react生命周期图谱汇总

react v16中组件生命周期图谱汇总，包含了组件 挂载——更新——卸载 这三个生命阶段：

react组件生命周期图谱

1. 挂载阶段

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor()
  如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

    constructor(props) {
      super(props);
      // 不要在这里调用 this.setState()
      this.state = { counter: 0 };
      this.handleClick = this.handleClick.bind(this);
    }
  

• static getDerivedStateFromProps()

    static getDerivedStateFromProps(props, state)
  

  getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应 返回一个对象来更新 state，如果返回 null 则不更新任何内容。此方法适用于 state 的值在任何时候都取决于 props的场景下。
• render()
  render() 方法是 class 组件中唯一必须实现的方法。
• componentDidMount()
  componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
  这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅。

2. 更新阶段

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps()
  更新阶段的getDerivedStateFromProps同挂载阶段的getDerivedStateFromProps。
• shouldComponentUpdate()

    shouldComponentUpdate(nextProps, nextState)
  

  根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。
  首次渲染或使用 forceUpdate() 时不会调用该方法，该方法在做渲染的性能优化时用的比较多，以减少不必要的渲染。
• render()
• getSnapshotBeforeUpdate()
  getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。例如：

  class ScrollingList extends React.Component {
    constructor(props) {
      super(props);
      this.listRef = React.createRef();
    }
  
    getSnapshotBeforeUpdate(prevProps, prevState) {
      // 我们是否在 list 中添加新的 items ？
      // 捕获滚动​​位置以便我们稍后调整滚动位置。
      if (prevProps.list.length < this.props.list.length) {
        const list = this.listRef.current;
        return list.scrollHeight - list.scrollTop;
     }
      return null;
    }
  
    componentDidUpdate(prevProps, prevState, snapshot) {
      // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
      // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
      //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
      if (snapshot !== null) {
        const list = this.listRef.current;
        list.scrollTop = list.scrollHeight - snapshot;
      }
    }
  
    render() {
      return (
        <div ref={this.listRef}>{/* ...contents... */}</div>
      );
    }
  }
  

  在上述示例中，重点是从 getSnapshotBeforeUpdate 读取 scrollHeight 属性，因为 “render” 阶段生命周期（如 render）和 “commit” 阶段生命周期（如 getSnapshotBeforeUpdate 和 componentDidUpdate）之间可能存在延迟。
• componentDidUpdate()

  componentDidUpdate(prevProps, prevState, snapshot)
  

  componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。

3. 卸载阶段

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

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

4. 错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
  此生命周期会在子组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state

  class ErrorBoundary extends React.Component {
    constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显降级 UI
    return { hasError: true };
  }
  
  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级  UI
      return <h1>Something went wrong.</h1>;
    }
  
    return this.props.children; 
  }
  

  getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。 如遇此类情况，请改用 componentDidCatch()。
• componentDidCatch()
  此生命周期在后代组件抛出错误后被调用。 它接收两个参数：error —— 抛出的错误 和 info —— 带 有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显示降级 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // "组件堆栈" 例子:
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级 UI
      return <h1>Something went wrong.</h1>;
    }  

    return this.props.children; 
  }
}