MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 不同版本中生命周期方法的变化与调整

2023-05-245.2k 阅读

React 生命周期方法概述

在深入探讨 React 不同版本中生命周期方法的变化与调整之前，我们先来回顾一下 React 生命周期方法的基本概念。React 组件的生命周期可以分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有相应的生命周期方法，这些方法为开发者提供了在组件不同阶段执行特定操作的机会。

挂载阶段

  • constructor(props)：这是 ES6 类组件的构造函数，在组件实例化时被调用。通常用于初始化 state 和绑定事件处理函数。例如：
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
    });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}
  • static getDerivedStateFromProps(props, state)：这是一个静态方法，在组件挂载和更新时都会被调用。它的作用是根据新的 props 来更新 state。例如：
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialValue
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.initialValue!== state.value) {
      return {
        value: props.initialValue
      };
    }
    return null;
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}
  • render()：这是组件中唯一必需的方法，用于返回 React 元素，描述组件的 UI。例如：
class MyComponent extends React.Component {
  render() {
    return <div>Hello, React!</div>;
  }
}
  • componentDidMount()：在组件被插入到 DOM 后调用，通常用于执行副作用操作，如发起网络请求、添加事件监听器等。例如：
class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component has been mounted');
    // 发起网络请求
    fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
  }
  render() {
    return <div>My Component</div>;
  }
}

更新阶段

  • shouldComponentUpdate(nextProps, nextState)：在组件接收到新的 props 或 state 时被调用，返回一个布尔值，决定组件是否需要更新。返回 true 表示需要更新，返回 false 则表示不需要更新。这可以用于性能优化，避免不必要的重新渲染。例如：
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.value!== nextProps.value) {
      return true;
    }
    return false;
  }
  render() {
    return <div>{this.props.value}</div>;
  }
}
  • static getDerivedStateFromProps(props, state)：如前所述，在更新阶段也会被调用，用于根据新的 props 更新 state。
  • render()：在更新阶段也会被调用，重新渲染组件。
  • getSnapshotBeforeUpdate(prevProps, prevState)：在更新发生之前，但在 DOM 更新之前被调用。它返回一个值，这个值会作为参数传递给 componentDidUpdate。常用于捕获更新前的 DOM 状态。例如：
class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.value!== this.props.value) {
      return this.refs.myDiv.offsetHeight;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      console.log('Height before update:', snapshot);
    }
  }
  render() {
    return <div ref="myDiv">{this.props.value}</div>;
  }
}
  • componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后被调用，通常用于执行依赖于 DOM 更新的操作，如更新第三方库的实例等。

卸载阶段

  • componentWillUnmount()：在组件从 DOM 中移除之前被调用，通常用于清理副作用，如取消网络请求、移除事件监听器等。例如：
class MyComponent extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
  handleScroll() {
    console.log('Window scrolled');
  }
  render() {
    return <div>My Component</div>;
  }
}

React v16 之前的生命周期方法

在 React v16 之前，生命周期方法的体系相对简单直接，但随着 React 应用规模的增长和对性能优化需求的提升，一些问题逐渐暴露出来。

挂载阶段

  • componentWillMount()：在组件即将被挂载到 DOM 之前调用。在这个方法中可以进行一些初始化操作，如设置 state 的初始值等。然而，这个方法有一些局限性，比如在这个阶段无法访问 DOM，并且如果在这个方法中发起网络请求，会导致不必要的性能开销，因为这个请求可能在组件还未真正挂载到 DOM 之前就开始了。例如：
class MyComponent extends React.Component {
  componentWillMount() {
    console.log('Component will mount');
    // 不推荐在此处发起网络请求
    fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
  }
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }
  render() {
    return <div>{this.state.data? JSON.stringify(this.state.data) : 'Loading...'}</div>;
  }
}
  • render()：如前文所述，用于返回描述组件 UI 的 React 元素。
  • componentDidMount()：在组件成功挂载到 DOM 后调用，这是执行副作用操作（如网络请求、添加事件监听器）的合适位置。

更新阶段

  • componentWillReceiveProps(nextProps)：当组件接收到新的 props 时被调用。可以在这个方法中根据新的 props 更新 state。但这个方法可能会导致一些难以调试的问题，因为它在组件接收到新 props 时就会被调用，无论这些 props 是否真的会导致组件更新。例如：
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialValue
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.initialValue!== this.state.value) {
      this.setState({
        value: nextProps.initialValue
      });
    }
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}
  • shouldComponentUpdate(nextProps, nextState)：决定组件是否需要更新，返回 true 或 false。
  • componentWillUpdate(nextProps, nextState)：在组件即将更新之前被调用，但在 render 方法之前。不推荐在这个方法中直接更新 state，因为可能会导致无限循环。
  • render()：再次渲染组件以反映新的状态或 props。
  • componentDidUpdate(prevProps, prevState)：在组件更新完成后调用，可以用于执行依赖于 DOM 更新的操作。

卸载阶段

  • componentWillUnmount()：在组件从 DOM 中移除之前被调用，用于清理副作用。

React v16 引入的生命周期方法变化

React v16 引入了一些重要的生命周期方法变化，主要目的是解决之前版本中生命周期方法存在的一些问题，同时提高 React 应用的性能和可维护性。

废弃的生命周期方法

  • componentWillMount：如前文提到，由于在这个阶段无法访问 DOM 且可能导致不必要的性能开销，该方法在 React v16.3 中被标记为不安全，并在后续版本中逐步移除。
  • componentWillReceiveProps：这个方法容易导致难以调试的问题，因为它在组件接收到新 props 时就会被调用，而不管这些 props 是否真的会导致组件更新。在 React v16.3 中被标记为不安全，并逐步被移除。
  • componentWillUpdate：不推荐在这个方法中直接更新 state，因为可能会导致无限循环。在 React v16.3 中被标记为不安全，并逐步被移除。

新增的生命周期方法

  • static getDerivedStateFromProps(props, state)：如前文所述，这个静态方法在组件挂载和更新时都会被调用，用于根据新的 props 来更新 state。它的引入是为了提供一种更安全、可预测的方式来更新 state 基于 props 的变化。例如：
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialValue
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.initialValue!== state.value) {
      return {
        value: props.initialValue
      };
    }
    return null;
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}
  • getSnapshotBeforeUpdate(prevProps, prevState)：在更新发生之前，但在 DOM 更新之前被调用。它返回一个值，这个值会作为参数传递给 componentDidUpdate。常用于捕获更新前的 DOM 状态，例如在列表项高度变化时记录旧的高度，以便在更新后进行相应的动画处理等。例如：
class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.value!== this.props.value) {
      return this.refs.myDiv.offsetHeight;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      console.log('Height before update:', snapshot);
    }
  }
  render() {
    return <div ref="myDiv">{this.props.value}</div>;
  }
}

React v17 及后续版本中的生命周期方法巩固与优化

React v17 在生命周期方法方面并没有引入大量全新的内容，而是对之前版本中引入的变化进行了巩固和进一步优化，以确保开发者能够更稳健地使用生命周期方法。

对废弃方法的进一步处理

在 React v17 中，对之前标记为不安全的生命周期方法（componentWillMount、componentWillReceiveProps 和 componentWillUpdate）继续保持废弃状态。虽然在代码中使用这些方法仍然可能不会立即报错，但强烈建议开发者迁移到新的生命周期方法模式。这有助于未来更好地维护代码，避免在后续版本中可能出现的兼容性问题。

优化与性能提升

React v17 进一步优化了生命周期方法的调用机制，确保在不同的渲染模式（如 React DOM、React Native 等）下都能保持一致的行为和性能表现。例如，在 React DOM 中，对 getSnapshotBeforeUpdate 和 componentDidUpdate 的调用时机进行了微调，使得 DOM 操作和副作用处理更加高效。同时，通过对内部机制的优化，减少了不必要的重新渲染，从而提升了应用的整体性能。

与新特性的结合

React v17 及后续版本的生命周期方法与 React 引入的一些新特性（如 Hooks）更好地结合。虽然 Hooks 提供了一种全新的方式来管理组件状态和副作用，但在一些场景下，类组件的生命周期方法仍然是有用的。例如，在一些复杂的业务逻辑组件中，可能仍然会使用类组件及其生命周期方法来处理特定的需求，而 Hooks 则可以在其他部分进行辅助。这种结合使得开发者可以根据具体的业务场景选择最合适的方式来构建 React 应用。

代码迁移示例：从旧生命周期方法到新生命周期方法

假设我们有一个旧的 React 组件，使用了 componentWillReceiveProps 方法来根据新的 props 更新 state。下面是将其迁移到使用 static getDerivedStateFromProps 方法的示例。

旧的实现

class OldComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.initialData
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.initialData!== this.state.data) {
      this.setState({
        data: nextProps.initialData
      });
    }
  }
  render() {
    return <div>{this.state.data}</div>;
  }
}

新的实现

class NewComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.initialData
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.initialData!== state.data) {
      return {
        data: props.initialData
      };
    }
    return null;
  }
  render() {
    return <div>{this.state.data}</div>;
  }
}

通过这样的迁移，我们使用 static getDerivedStateFromProps 方法来更安全、可预测地根据新的 props 更新 state，避免了 componentWillReceiveProps 可能带来的问题。

不同版本生命周期方法在实际项目中的应用场景

React v16 之前的应用场景

在 React v16 之前，componentWillMount 虽然存在一些问题，但在一些简单的项目中，开发者可能会在这个方法中进行一些简单的初始化操作，如设置默认的 state 值。componentWillReceiveProps 在一些需要根据 props 变化实时更新 state 的场景中被广泛使用，尽管它存在潜在的问题。例如，在一个根据用户登录状态显示不同 UI 的组件中，可能会在 componentWillReceiveProps 中根据新的登录状态 props 更新组件的 state，从而显示相应的 UI。

React v16 及之后的应用场景

在 React v16 及之后的版本中，static getDerivedStateFromProps 适用于那些需要根据 props 变化更新 state 的场景，它提供了一种更安全、可预测的方式。getSnapshotBeforeUpdate 在需要捕获更新前 DOM 状态的场景中非常有用，比如在实现列表项动画时，需要知道更新前的高度等信息。而对于副作用操作，componentDidMount 和 componentDidUpdate 仍然是主要的执行位置，但在使用时需要注意与新的生命周期方法配合，以确保代码的健壮性和性能。

总结 React 生命周期方法变化带来的影响

React 不同版本中生命周期方法的变化对开发者编写 React 应用产生了多方面的影响。从积极的方面来看，新的生命周期方法提高了代码的可维护性和可预测性。通过废弃那些容易导致问题的方法，如 componentWillReceiveProps，减少了潜在的调试困难。static getDerivedStateFromProps 和 getSnapshotBeforeUpdate 等新方法提供了更清晰的逻辑和更安全的操作方式。

在性能方面，React v16 及后续版本通过优化生命周期方法的调用机制，减少了不必要的重新渲染，提升了应用的整体性能。这对于大型 React 应用来说尤为重要，能够显著提高用户体验。

然而，这些变化也要求开发者学习和适应新的生命周期方法模式。对于已经使用旧版本生命周期方法编写了大量代码的项目，迁移到新的模式可能需要一定的工作量和时间。但从长远来看，遵循新的生命周期方法规范将有助于构建更健壮、高效的 React 应用。

结语

React 生命周期方法的变化是 React 框架不断发展和优化的体现。随着 React 版本的演进，开发者需要及时了解这些变化，以编写更优质的代码。通过合理使用新的生命周期方法，结合 React 的其他特性，我们能够构建出性能卓越、易于维护的 React 应用，满足不断增长的业务需求。希望通过本文的介绍，开发者能够对 React 不同版本中生命周期方法的变化与调整有更深入的理解，并在实际项目中灵活应用。