面试题：React 16+ 中生命周期变更后组件销毁阶段的新考量

Question

React 16引入了新的生命周期机制，例如getDerivedStateFromProps等新方法，这对组件销毁阶段带来了哪些新的影响或者需要新的考量点？在使用这些新机制的项目中，如何优化组件销毁时的性能与资源释放？请深入分析并结合实际案例说明。

Answer 1

新生命周期机制对组件销毁阶段的影响与考量点

1. getDerivedStateFromProps对组件销毁阶段无直接影响：此方法主要用于在组件接收到新的props时更新state，它在组件挂载和更新时调用，与组件销毁阶段无关。不过，它改变了我们更新state的方式，可能间接影响到组件销毁前的状态管理。
2. componentWillUnmount 被弃用的影响：React 16.3开始 componentWillUnmount 逐步被标记为不安全的生命周期方法。虽然仍可使用，但未来可能移除。这意味着依赖此方法进行资源清理、取消网络请求等操作需要寻找替代方案。例如，以往在 componentWillUnmount 中取消 fetch 请求：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.abortController = new AbortController();
  }
  componentWillUnmount() {
    this.abortController.abort();
  }
  render() {
    return <div>My Component</div>;
  }
}

3. 新的考量点：随着 getDerivedStateFromProps 和其他新生命周期方法的引入，我们需要更加关注组件状态的一致性和可预测性。在组件销毁前，确保所有异步操作已妥善处理，避免内存泄漏和潜在的错误。

优化组件销毁时的性能与资源释放

1. 使用 useEffect 的清理函数（针对函数式组件）：在函数式组件中，useEffect 可用于替代 componentDidMount、componentDidUpdate 和 componentWillUnmount 的功能。通过返回一个清理函数来处理资源释放。例如，监听窗口滚动事件并在组件销毁时移除监听器：

import React, { useEffect } from'react';

const MyComponent = () => {
  useEffect(() => {
    const handleScroll = () => {
      console.log('Window scrolled');
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div>My Component</div>;
};

2. 使用 componentDidMount 和 componentWillUnmount 的替代方案（针对类组件）：对于类组件，虽然 componentWillUnmount 被弃用，但可以结合 getSnapshotBeforeUpdate 和 componentDidUpdate 来模拟类似功能。例如，在组件销毁前保存滚动位置：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.scrollPosition = 0;
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return window.pageYOffset;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    this.scrollPosition = snapshot;
  }
  componentWillUnmount() {
    // 这里可使用this.scrollPosition做一些清理操作
    console.log('Scroll position before unmount:', this.scrollPosition);
  }
  render() {
    return <div>My Component</div>;
  }
}

3. 取消异步操作：在组件销毁前取消未完成的异步操作，如 fetch 请求、定时器等。例如，使用 AbortController 取消 fetch 请求：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.abortController = new AbortController();
  }
  componentDidMount() {
    fetch('https://example.com/api', { signal: this.abortController.signal })
    .then(response => response.json())
    .then(data => console.log(data));
  }
  componentWillUnmount() {
    this.abortController.abort();
  }
  render() {
    return <div>My Component</div>;
  }
}

4. 清理订阅和事件监听器：确保在组件销毁时移除所有自定义事件监听器和订阅。例如，在Redux应用中取消订阅：

import React from'react';
import { connect } from'react-redux';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillUnmount() {
    if (this.props.unsubscribe) {
      this.props.unsubscribe();
    }
  }
  render() {
    return <div>My Component</div>;
  }
}

const mapStateToProps = state => ({
  // state mapping
});

const mapDispatchToProps = dispatch => ({
  // dispatch mapping
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

通过以上方式，在使用React 16新生命周期机制的项目中，可以有效优化组件销毁时的性能与资源释放。