面试题：React 16+ 新生命周期与状态管理在大型应用架构中的深度融合

结合方式

getDerivedStateFromProps：

用途：该方法在组件挂载及更新时被调用，它接收props和当前state，返回一个对象来更新state。在Redux应用中，它可以用于根据Redux store中的数据（通过props传递进来）来更新组件的本地state。
示例：假设组件需要根据Redux中的某个列表长度来显示不同的提示信息。

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

class MyComponent extends React.Component {
  state = {
    tipMessage: ''
  };
  static getDerivedStateFromProps(props, state) {
    if (props.list.length === 0) {
      return { tipMessage: '列表为空' };
    } else {
      return { tipMessage: `列表有${props.list.length}项` };
    }
  }
  render() {
    return <div>{this.state.tipMessage}</div>;
  }
}

const mapStateToProps = state => ({
  list: state.list
});

export default connect(mapStateToProps)(MyComponent);

getSnapshotBeforeUpdate：

用途：在DOM更新之前调用，返回的任何值将作为参数传递给componentDidUpdate。在Redux应用中，可用于在状态更新引起DOM变化前捕获一些信息，比如滚动位置等。
示例：假设一个聊天窗口组件，当新消息到来（通过Redux状态变化）时，需要记录当前滚动位置，以便在更新后决定是否需要滚动到新消息位置。

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

class ChatWindow extends React.Component {
  chatRef = React.createRef();
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.messages.length!== this.props.messages.length) {
      return this.chatRef.current.scrollTop;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot!== null) {
      const newScrollTop = this.chatRef.current.scrollHeight - this.chatRef.current.clientHeight;
      if (snapshot < newScrollTop) {
        this.chatRef.current.scrollTop = newScrollTop;
      }
    }
  }
  render() {
    return (
      <div ref={this.chatRef}>
        {this.props.messages.map((msg, index) => (
          <div key={index}>{msg}</div>
        ))}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  messages: state.chatMessages
});

export default connect(mapStateToProps)(ChatWindow);

可能遇到的挑战及解决方案

getDerivedStateFromProps过度使用导致的性能问题：

挑战：如果在getDerivedStateFromProps中进行复杂计算，每次props或state变化都会触发，可能导致性能下降。
解决方案：尽量减少复杂计算，可使用shouldComponentUpdate或React.memo（对于函数组件）来控制组件更新，避免不必要的getDerivedStateFromProps调用。例如，在上述MyComponent中，可以添加shouldComponentUpdate方法：

class MyComponent extends React.Component {
  state = {
    tipMessage: ''
  };
  static getDerivedStateFromProps(props, state) {
    if (props.list.length === 0) {
      return { tipMessage: '列表为空' };
    } else {
      return { tipMessage: `列表有${props.list.length}项` };
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.list.length!== this.props.list.length;
  }
  render() {
    return <div>{this.state.tipMessage}</div>;
  }
}

getSnapshotBeforeUpdate逻辑复杂难以维护：

挑战：当getSnapshotBeforeUpdate和componentDidUpdate中的逻辑变得复杂时，代码可读性和可维护性会变差。
解决方案：将复杂逻辑拆分成更小的函数，使每个函数专注于单一职责。例如，在ChatWindow组件中，可以将滚动相关逻辑拆分成一个单独的函数：

class ChatWindow extends React.Component {
  chatRef = React.createRef();
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.messages.length!== this.props.messages.length) {
      return this.chatRef.current.scrollTop;
    }
    return null;
  }
  handleScrollAfterUpdate(snapshot) {
    if (snapshot!== null) {
      const newScrollTop = this.chatRef.current.scrollHeight - this.chatRef.current.clientHeight;
      if (snapshot < newScrollTop) {
        this.chatRef.current.scrollTop = newScrollTop;
      }
    }
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    this.handleScrollAfterUpdate(snapshot);
  }
  render() {
    return (
      <div ref={this.chatRef}>
        {this.props.messages.map((msg, index) => (
          <div key={index}>{msg}</div>
        ))}
      </div>
    );
  }
}

星途面试题库

面试题：React 16+ 新生命周期与状态管理在大型应用架构中的深度融合

知识考点

面试题答案

结合方式

可能遇到的挑战及解决方案