面试题：如何在 React 组件复杂场景下精准控制生命周期方法执行顺序以优化性能

1. 运用生命周期方法优化性能

挂载阶段：
- constructor：初始化状态和绑定事件处理函数。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    // 处理点击逻辑
  }
  render() {
    return <button onClick={this.handleClick}>点击</button>;
  }
}

static getDerivedStateFromProps：在组件挂载及更新时都会被调用，用于根据新的props更新state。例如，当父组件传递的某个prop用于决定子组件内部状态时：

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

componentDidMount：在此处发起网络请求获取数据，因为此时组件已经挂载到 DOM 上。例如：

class MyComponent extends React.Component {
  state = { data: [] };
  componentDidMount() {
    fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
  }
  render() {
    return <div>{this.state.data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
  }
}

更新阶段：
- shouldComponentUpdate：根据props和state的变化决定组件是否需要更新，返回true或false。例如，只有当props中的某个特定属性变化时才更新：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.specificProp!== this.props.specificProp;
  }
  render() {
    return <div>{this.props.specificProp}</div>;
  }
}

getSnapshotBeforeUpdate：在更新发生前获取当前 DOM 的某些状态（如滚动位置），返回的值会作为componentDidUpdate的第三个参数。例如：

class MyScrollableComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    const scrollPosition = window.pageYOffset;
    return scrollPosition;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot!== window.pageYOffset) {
      // 处理滚动位置变化逻辑
    }
  }
  render() {
    return <div>{/* 内容 */}</div>;
  }
}

componentDidUpdate：在组件更新后执行副作用操作，如操作 DOM、更新第三方库等。例如，更新图表组件：

class MyChartComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.data!== this.props.data) {
      // 使用新数据更新图表
    }
  }
  render() {
    return <div id="chart"></div>;
  }
}

卸载阶段：
- componentWillUnmount：在此处清理定时器、取消网络请求等。例如：

class MyComponent extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      // 定时任务逻辑
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    return <div>{/* 组件内容 */}</div>;
  }
}

2. 可能遇到的生命周期相关性能问题及解决方案

问题：componentDidMount中发起过多网络请求，导致性能下降。
- 解决方案：合并请求，例如使用Promise.all将多个请求合并为一个。

class MyComponent extends React.Component {
  state = { data1: [], data2: [] };
  componentDidMount() {
    const request1 = fetch('https://example.com/api/data1');
    const request2 = fetch('https://example.com/api/data2');
    Promise.all([request1, request2])
    .then(responses => Promise.all(responses.map(response => response.json())))
    .then(([data1, data2]) => this.setState({ data1, data2 }));
  }
  render() {
    return (
      <div>
        {this.state.data1.map(item => <p key={item.id}>{item.name}</p>)}
        {this.state.data2.map(item => <p key={item.id}>{item.value}</p>)}
      </div>
    );
  }
}

问题：shouldComponentUpdate返回错误结果，导致不必要的渲染。
- 解决方案：仔细检查props和state的比较逻辑，确保只在真正需要更新时返回true。可以使用deepEqual等工具库进行深度比较，例如：

import { deepEqual } from 'lodash';
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return!deepEqual(nextProps, this.props) ||!deepEqual(nextState, this.state);
  }
  render() {
    return <div>{/* 组件内容 */}</div>;
  }
}

问题：componentWillUnmount未清理副作用，如定时器未清除导致内存泄漏。
- 解决方案：在componentWillUnmount中仔细清理所有副作用，如定时器、事件监听器等。例如：

class MyComponent extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  handleScroll = () => {
    // 滚动处理逻辑
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
  render() {
    return <div>{/* 组件内容 */}</div>;
  }
}

星途面试题库

面试题：如何在 React 组件复杂场景下精准控制生命周期方法执行顺序以优化性能

知识考点

面试题答案

1. 运用生命周期方法优化性能

2. 可能遇到的生命周期相关性能问题及解决方案