面试题：React 16.x 相较于 React 15.x 生命周期方法有哪些主要变化

Question

请详细说明 React 16.x 版本中引入的新生命周期方法以及被废弃的老方法，并阐述为何要做出这些改变。

Answer 1

新生命周期方法

1. getDerivedStateFromProps(nextProps, prevState)
   • 作用：该方法在组件接收到新的props或state更新时被调用，返回一个对象来更新state，若返回null则不更新。常用于根据props更新state。
   • 示例：

class Example extends React.Component {
  state = { value: this.props.initialValue };
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.initialValue!== prevState.value) {
      return { value: nextProps.initialValue };
    }
    return null;
  }
  render() {
    return <div>{this.state.value}</div>;
  }
}

2. getSnapshotBeforeUpdate(prevProps, prevState)
   • 作用：在DOM更新前调用，返回的任何值将作为第三个参数传递给componentDidUpdate。常用于在DOM更新前捕获一些信息，如滚动位置。
   • 示例：

class Example extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list!== this.props.list) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot!== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }
  render() {
    return <div ref={el => this.listRef = el}>{this.props.list.map(item => <div key={item.id}>{item.text}</div>)}</div>;
  }
}

被废弃的老方法

1. componentWillMount
   • 废弃原因：该方法在服务端渲染（SSR）时会被调用两次，一次在服务端，一次在客户端，这可能导致不一致的状态。同时，在异步渲染模式下，它可能在组件被丢弃前多次调用，不符合新的渲染机制。
2. componentWillReceiveProps(nextProps)
   • 废弃原因：容易导致在props变化时不必要的state更新，造成数据流动不清晰。在异步渲染模式下，该方法可能在props实际更新前多次调用，引发错误。
3. componentWillUpdate(nextProps, nextState)
   • 废弃原因：在异步渲染模式下，该方法可能在组件更新前多次调用，这与React的新渲染机制不兼容，可能导致不可预测的行为。

改变的原因

1. 适应异步渲染：React 16.x引入了Fiber架构，支持异步渲染。老的生命周期方法在异步渲染环境下会出现多次调用等问题，新的生命周期方法设计为更适合异步渲染模式，保证渲染过程的一致性和可预测性。
2. 优化数据流：废弃的方法容易造成state更新逻辑混乱，新的生命周期方法如getDerivedStateFromProps更明确地定义了props到state的映射，使数据流更加清晰，便于维护和调试。
3. 服务端渲染一致性：解决老方法在服务端渲染和客户端渲染不一致的问题，确保应用在不同环境下行为统一。