React 生命周期杂记（开发者须知）

2024-02-21 01:36:47

React 作为前端开发领域炙手可热的框架，其组件化开发思想极大地提升了开发效率和代码可维护性。而 React 组件的生命周期，就好比是组件从出生到消亡的一段旅程，其中经历了多个关键节点，每个节点都对应着特定的生命周期函数。了解并掌握这些函数，如同掌握了组件的命运脉络，可以让我们更加灵活地控制组件的行为，打造出性能卓越的应用程序。

我们不妨将一个 React 组件的生命周期想象成一部电影的拍摄过程：

剧本创作（初始化阶段）： 在电影开拍之前，首先需要编写剧本，确定故事的走向和角色的设定。同样，在 React 组件创建之初，我们会定义组件的初始状态和属性，这些信息就像剧本一样，为组件后续的行为奠定了基础。
演员登场（挂载阶段）： 剧本完成后，演员们开始登场，正式进入拍摄阶段。在 React 中，组件挂载阶段就如同演员亮相，组件被渲染到页面上，开始与用户进行交互。
剧情发展（更新阶段）： 随着剧情的发展，演员们需要根据剧本的要求进行表演，他们的动作和表情会随着剧情的变化而变化。同样，当组件的属性或状态发生改变时，组件也会重新渲染，更新页面上的内容，以响应用户的操作或数据的变化。
杀青散场（卸载阶段）： 电影拍摄完成后，演员们会卸下妆容，离开片场。同样的，当组件不再需要时，它会从页面上卸载，释放占用的资源，结束它的生命周期。

现在，让我们深入了解 React 组件生命周期的各个阶段和对应的函数：

1. 挂载阶段：组件的诞生

constructor()： 这是组件的构造函数，在组件创建时首先被调用。我们通常在构造函数中初始化组件的状态，并绑定事件处理函数到 this 上。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  // ...其他代码...
}

static getDerivedStateFromProps()： 这是一个静态方法，在组件接收新的属性时被调用。它可以根据新的属性来更新组件的状态，例如，根据传入的用户信息来更新组件的显示内容。

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.user !== state.user) {
      return { user: props.user };
    }
    return null;
  }

  // ...其他代码...
}

render()： 这是组件的核心函数，它负责渲染组件的 UI。render 函数必须返回一个 React 元素，例如 JSX 代码。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.state.user.name}!</h1>
      </div>
    );
  }
}

componentDidMount()： 在组件挂载到 DOM 后立即被调用。我们通常在这个函数中执行一些需要依赖 DOM 的操作，例如，获取 DOM 元素的尺寸、发起网络请求或订阅事件。

class MyComponent extends React.Component {
  componentDidMount() {
    const elementWidth = this.myElement.offsetWidth;
    console.log('Element width:', elementWidth);

    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));

    window.addEventListener('resize', this.handleResize);
  }

  // ...其他代码...
}

2. 更新阶段：组件的成长与变化

static getDerivedStateFromProps()： 与挂载阶段相同，这个函数在组件接收新的属性时也会被调用，用于根据新的属性更新组件的状态。
shouldComponentUpdate()： 在组件接收到新的属性或状态时被调用，用于决定组件是否需要重新渲染。如果这个函数返回 false，则组件不会重新渲染，也不会调用后续的生命周期函数。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.value === this.props.value) {
      return false; // 如果 value 属性没有改变，则不重新渲染
    }
    return true;
  }

  // ...其他代码...
}

render()： 与挂载阶段相同，render 函数负责渲染组件的 UI。
getSnapshotBeforeUpdate()： 在组件更新之前，但在 DOM 更新之前被调用。它可以获取一些 DOM 信息，例如滚动位置，并将这些信息传递给 componentDidUpdate() 函数。

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    const scrollTop = this.myElement.scrollTop;
    return { scrollTop };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    this.myElement.scrollTop = snapshot.scrollTop;
  }

  // ...其他代码...
}

componentDidUpdate()： 在组件更新后被调用。我们通常在这个函数中执行一些需要依赖更新后 DOM 的操作，例如，更新 DOM 元素的位置或重新计算组件的尺寸。

3. 卸载阶段：组件的谢幕

componentWillUnmount()： 在组件卸载之前被调用。我们通常在这个函数中执行一些清理工作，例如，取消网络请求、移除事件监听器或清除定时器。

class MyComponent extends React.Component {
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
    clearTimeout(this.timer);
  }

  // ...其他代码...
}

常见问题解答

1. React 17 中移除了哪些生命周期函数？

React 17 移除了 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 这三个生命周期函数。这些函数容易被误用，并且在异步渲染模式下可能会导致问题。

2. 如何在 React 17 中替代被移除的生命周期函数？