reactjs - 如何重构处理太多条件/用例的 react 组件？

Question

我想将 SOLID 原则应用于处理太多“用例”的 react 组件。例如，假设我有一个组件，它的主要职责是呈现这样的表格:

return (
   <Table dataSource="" name={tableName} />
)

这是该表的非常简单的表示。但复杂性的要点是 Prop dataSource .里面这个<Table>组件，我实际上有很多逻辑/if-else 条件来满足 dataSource由于 dataSource可以采用许多不同的形状/对象结构。有些非常相似，可以抽象，而有些则非常具体(甚至可能只是一键不同)。

例如:

const tableName = `${
    dataSource === 'dataSourceA'
        ? dataSourceName
        : dataSourceName.name
}`;

这只是一个例子。想象一些 dataSource有它的name属性嵌套 3 层深。然后其他dataSource键甚至会有不同的名称(尽管我需要渲染的结果数据实际上是相同的)。不仅如此，取决于dataSource ，我可能需要调用不同的端点来执行某些功能(同样，该函数的目的相同，只是端点可以不同)。因此，在同一个组件中，我将拥有如下功能:

const exportTable = () => {
    if(dataSource === 'dataSourceA') {
        // use endpoint A
    } else if (dataSource=== 'dataSourceB') {
        // use endpoint B
    } else {
         // use endpoint C
    }
}

重构此类组件并使其更易于维护的最佳方法是什么？稍后，我们可以有 10 种类型的 dataSources而且我不能在组件中执行 if-else 条件来满足它们的差异。

Answer 1

您可以使用钩子(Hook)来抽象数据的获取方式:

const { rows, ...data } = useData(datasource)
return (
  <Table row={rows} {...data} />
);

在 useData 钩子(Hook)中:

function useData(dataSource) {
  if(dataSource === 'dataSourceA') {
      // use endpoint A
  } else if (dataSource=== 'dataSourceB') {
      // use endpoint B
  } else {
       // use endpoint C
  }

  // ...

  return data;
}

您仍然需要处理条件，但它们将与 UI 分离，这将更容易管理组件生命周期。

其次，您可以创建一个服务/API 层来抽象数据获取。

async function fetchFromEndpointA(args) {
  const response = await httpClient
      .get(`/endpointA/${args}`)

  return response.body;
}

API 层将被钩子(Hook)消耗:

// react-async useAsync is a lib that helps manage async state
import { useAsync } from 'react-async';

function useData(dataSource) {
  const a = useAsync({ promiseFn: fetchFromEndpointA, defer: true });
  const b = useAsync({ promiseFn: fetchFromEndpointB, defer: true });

  if(dataSource === 'dataSourceA') {
    const { run, error, isLoading data } = a;
    a.run();
    return { error, isLoading, data };
  }
  // ...
}

您还可以从钩子(Hook)中抽象出数据源解析+获取。在不知道数据源对象的细节的情况下，我只能推荐一个通用策略。它可能看起来像:

async function obtainData(dataSource, parseableObject) {
  if(dataSource === 'dataSourceA') {
    return parseableObject['name'];
  } else if (dataSource === 'dataSourceB') {
    const name = parseableObject[0][0].Name; // whatever the path to name is
    const data = await callEndpointB(name);
    return data.result;
  } else {
    // ...
  }
}

现在任何钩子(Hook)或组件都可以调用 obtainData 而无需知道条件。钩子(Hook)/组件只需要跟踪异步状态。

例如，在一个钩子(Hook)中:

function useData(dataSource, parseableObject) {
  return useAsync({ promiseFn: () => obtainData(dataSource, parseableObject) });
}

或者，只需在组件中调用它并完全放弃自定义钩子(Hook):

const { rows, ...data } = useAsync({ promiseFn: () => obtainData(dataSource, parseableObject) });
return (
  <Table row={rows} {...data} />
);

在做出决定之前，您可能需要探索很多可能性。

最后，关于重构的一些常见建议:

• 在抽象或重构之前，首先通过可靠的、人类可读的测试来纠正所有具体的高级行为。快速而肮脏的代码很好。不要依赖测试实现细节或内部抽象。然后，如果稍后出现清晰的模式，您可以使用现有的测试来指导您进行重构。

• 考虑成本。有一句程序员的谚语类似于“没有抽象总比有错误的抽象好”。如果您决定将代码重新组织到单独的层中，则需要主动了解其对可维护性等的影响。查看 WET Codebase .与其在此总结，不如您观看/阅读并收集您自己的见解。