面试题：React 新老生命周期方法在复杂第三方状态管理库中的过渡与融合

1. 设计模式层面

单一职责原则：确保每个生命周期方法只负责单一的任务。例如，将数据获取逻辑从 componentWillMount 迁移到新的生命周期，要保证新的方法只专注于数据获取，不混入其他不相关逻辑。
依赖倒置原则：如果第三方状态管理库（如 MobX）依赖于 React 组件的生命周期，通过抽象接口来降低这种依赖。比如，创建一个抽象的数据加载服务，无论在旧还是新的生命周期中都调用这个服务，这样组件与具体的生命周期获取数据的方式解耦。

2. 代码结构层面

分离逻辑：将不同类型的逻辑（如数据获取、副作用处理等）分别封装到不同的函数或模块中。这样在迁移时，只需在新的生命周期方法中调用对应的函数即可。例如，原来在 componentWillMount 中有数据获取和一些初始化逻辑，将数据获取逻辑抽取到 fetchData 函数，初始化逻辑抽取到 initComponent 函数。
使用高阶组件（HOC）或自定义 Hook（如果使用 React Hooks）：通过 HOC 可以将通用的逻辑（如数据获取与状态管理结合的逻辑）复用。在新的生命周期方法中，在 HOC 内部处理逻辑迁移。如果使用 Hooks，可以将相关逻辑封装到自定义 Hook 中，在组件中使用 Hook 替代原来在生命周期中的操作。

3. 示例代码

假设我们有一个使用 MobX 的 React 组件，原来在 componentWillMount 中获取数据：

import React from'react';
import { observer } from'mobx-react';
import myStore from './myStore';

class OldComponent extends React.Component {
  componentWillMount() {
    myStore.fetchData();
  }

  render() {
    return (
      <div>
        {myStore.data.map(item => (
          <p key={item.id}>{item.name}</p>
        ))}
      </div>
    );
  }
}

export default observer(OldComponent);

迁移到新的生命周期方法 componentDidMount：

import React from'react';
import { observer } from'mobx-react';
import myStore from './myStore';

class NewComponent extends React.Component {
  componentDidMount() {
    myStore.fetchData();
  }

  render() {
    return (
      <div>
        {myStore.data.map(item => (
          <p key={item.id}>{item.name}</p>
        ))}
      </div>
    );
  }
}

export default observer(NewComponent);

使用自定义 Hook 来处理数据获取逻辑（如果适用 React Hooks）：

import React, { useEffect } from'react';
import { observer } from'mobx-react';
import myStore from './myStore';

const useFetchData = () => {
  useEffect(() => {
    myStore.fetchData();
  }, []);
};

const HookComponent = () => {
  useFetchData();

  return (
    <div>
      {myStore.data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

export default observer(HookComponent);

在这个示例中，无论是迁移到新的生命周期方法 componentDidMount 还是使用自定义 Hook，都将数据获取逻辑从旧的 componentWillMount 平稳迁移过来，并且遵循了上述设计模式和代码结构优化原则。

星途面试题库

面试题：React 新老生命周期方法在复杂第三方状态管理库中的过渡与融合

知识考点

面试题答案

1. 设计模式层面

2. 代码结构层面

3. 示例代码