面试题：React 新旧生命周期方法在复杂业务场景下的应用及迁移策略

1. 理解新旧生命周期差异

旧生命周期：如 componentWillMount、componentWillReceiveProps、componentWillUpdate 等。这些方法在 React 未来版本可能被移除，因为它们在异步渲染模式下可能导致不一致问题。
新生命周期：使用 getDerivedStateFromProps 替代 componentWillReceiveProps，用 getSnapshotBeforeUpdate 替代 componentWillUpdate，UNSAFE_componentWillMount 可在 constructor 或 useEffect 中处理。

2. 数据获取迁移

场景：在组件挂载时从 API 获取数据。
旧方法：可能在 componentWillMount 中发起 AJAX 请求。

class OldComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }
  componentWillMount() {
    fetch('/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
  }
  render() {
    return <div>{this.state.data ? <p>{this.state.data}</p> : <p>Loading...</p>}</div>;
  }
}

新方法：使用 useEffect（对于函数组件）或在 constructor 中绑定方法并在 componentDidMount 中调用。

import React, { useEffect, useState } from 'react';
const NewComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
  }, []);
  return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
};

可能问题：在 componentWillMount 中获取数据，可能在组件渲染前还未获取到数据，导致首次渲染时 UI 展示不准确。新方法使用 useEffect 会在组件挂载后执行，可能导致首次渲染闪屏。
解决方案：可在初始渲染时显示加载状态，同时在 useEffect 中设置 dependency array 避免重复请求。

3. 状态管理迁移

场景：根据 props 更新 state。
旧方法：在 componentWillReceiveProps 中比较新旧 props 并更新 state。

class OldStateComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.initialValue };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.initialValue!== this.props.initialValue) {
      this.setState({ value: nextProps.initialValue });
    }
  }
  render() {
    return <div><input type="text" value={this.state.value} /></div>;
  }
}

新方法：使用 getDerivedStateFromProps。

class NewStateComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.initialValue };
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.initialValue!== prevState.value) {
      return { value: nextProps.initialValue };
    }
    return null;
  }
  render() {
    return <div><input type="text" value={this.state.value} /></div>;
  }
}

可能问题：getDerivedStateFromProps 是静态方法，不能访问 this，可能导致逻辑编写不直观。
解决方案：合理拆分逻辑，可将复杂逻辑提取到单独函数中，同时结合 useReducer 等更高级的状态管理方案（对于函数组件）。

4. 副作用处理迁移

场景：在组件更新时操作 DOM。
旧方法：在 componentWillUpdate 中操作 DOM。

class OldDOMComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.myRef = React.createRef();
  }
  componentWillUpdate() {
    this.myRef.current.style.color = 'red';
  }
  render() {
    return <div><button onClick={() => this.setState({ count: this.state.count + 1 })}>Click</button><p ref={this.myRef}>{this.state.count}</p></div>;
  }
}

新方法：使用 getSnapshotBeforeUpdate。

class NewDOMComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.myRef = React.createRef();
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.count!== this.state.count) {
      return this.myRef.current.style.color;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      this.myRef.current.style.color = 'blue';
    }
  }
  render() {
    return <div><button onClick={() => this.setState({ count: this.state.count + 1 })}>Click</button><p ref={this.myRef}>{this.state.count}</p></div>;
  }
}

可能问题：getSnapshotBeforeUpdate 和 componentDidUpdate 配合使用，逻辑较分散，难以维护。
解决方案：使用自定义 hooks 封装 DOM 操作逻辑，提高复用性和可维护性。

5. 整体迁移步骤

组件梳理：列出所有使用旧生命周期方法的组件，按功能模块分类。
逐个迁移：从简单组件开始，按照上述数据获取、状态管理、副作用处理等场景迁移每个组件。
测试：对迁移后的组件进行单元测试、集成测试，确保功能正常。
优化：检查新代码，优化逻辑，确保性能不受影响。

6. 团队协作与沟通

知识分享：组织内部培训，分享新旧生命周期差异及迁移方法。
代码审查：在迁移过程中进行代码审查，确保代码质量和迁移的正确性。
版本控制：使用版本控制系统记录迁移过程，便于回滚和跟踪。

星途面试题库

面试题：React 新旧生命周期方法在复杂业务场景下的应用及迁移策略

知识考点

面试题答案

1. 理解新旧生命周期差异

2. 数据获取迁移

3. 状态管理迁移

4. 副作用处理迁移

5. 整体迁移步骤

6. 团队协作与沟通