面试官常问React的生命周期问题

下面我将详细讲解“面试官常问React的生命周期问题”的完整攻略:

什么是React生命周期

在React中，每个组件都有各种渲染阶段存在一些生命钩子，称之为生命周期。React生命周期包含的钩子函数使得在组件被创建、更新或被销毁时你可以监听和操作这些生命周期。

React生命周期被分为三个阶段：

• mount：组件首次渲染到DOM时的阶段
• update：组件在更新prop或state时的阶段
• unmount：组件从DOM中移除时的阶段

每一个React组件都要经历这些阶段中的一些生命周期方法。这些生命周期方法可以帮助我们优化代码、解决问题，甚至进行资源清理。

React生命周期的方法

Mounting

在下表中，这些方法是在组件挂载时被调用的方法。

方法名	调用时机
constructor	通过props和state初始化组件的实例
getDerivedStateFromProps	仅用于罕见的用例，即state的新值依赖于props
render	渲染组件，生成Virtual DOM
componentDidMount	在组件挂载到DOM树之后，相当于DOM的ready回调

Updating

在下表中，这些方法是在组件更新时被调用的方法。

方法名	调用时机
getDerivedStateFromProps	state依赖props，通知props数据已经发生了变化
shouldComponentUpdate	是否要让React执行render函数重新渲染DOM结构
render	执行render，生成Virtual DOM
getSnapshotBeforeUpdate	获取更新前的一个快照
componentDidUpdate	更新后的回调

Unmounting

在下表中，这些方法是在组件卸载时被调用的方法。

方法名	调用时机
componentWillUnmount	在组件从DOM中移除之前被调用，执行一些必要的清理操作

Error Handling

在下表中，这个方法是在组件中出现错误的时候被调用的方法。

方法名	调用时机
componentDidCatch	捕获组件树中的一个异常，并阻止它向上传播

React生命周期的示例

示例1：

import React from 'react';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
  }

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true;
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return null;
  }

  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  componentDidCatch(error, info) {
    console.log('componentDidCatch');
  }

  render() {
    console.log('render');
    return <div>{this.props.text}</div>;
  }
}

export default ExampleComponent;

你可以准确看到每个生命周期方法的调用顺序,从而更好的理解每个生命周期的作用。

示例2：

import React from 'react';

class ExampleComponent extends React.Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    console.log('componentDidMount');
    this.intervalId = setInterval(this.incrementCount, 1000);
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
    clearInterval(this.intervalId);
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    console.log('render');
    return <div>Count: {this.state.count}</div>;
  }
}

export default ExampleComponent;

这个组件在挂载时开始计算一个计数器，并在每秒钟钟更新它的状态。在组件卸载之前，必须清除该计数器。如果不清除计数器，它会继续计时器不停地工作，将浪费资源。在这种情况下，通过componentWillUnmount生命周期方法清理资源。

这两个例子展示了React生命周期的作用及其用法，希望可以帮助你更好地理解React的生命周期。