策略模式：在 React 中优雅地处理多种渲染结果

前端

2024-01-31 07:20:21

采用策略模式书写 TS 友好的 React 组件

前言

在复杂的 React 应用中，我们经常需要处理不同的渲染结果，这通常会涉及到冗长的 if-else 或 switch-case 语句。这些语句不仅会使代码难以维护，而且对 TypeScript 也不友好。

策略模式

策略模式是一种设计模式，允许我们通过使用不同的策略对象来改变算法的行为。在 React 中，我们可以将策略对象用于组件渲染，从而实现解耦渲染逻辑和业务逻辑。

具体实现

要使用策略模式，我们需要：

定义一个策略接口，它定义了渲染组件所需的方法。
为每种渲染结果创建具体策略类，它们实现策略接口。
在我们的 React 组件中，使用一个策略工厂来创建适当的策略对象，该对象负责渲染组件。

示例

考虑以下场景：我们有一个 React 组件，需要根据不同的业务逻辑渲染三种不同的子组件。我们可以使用策略模式如下实现：

策略接口

interface IRenderStrategy {
  render(): React.ReactElement | null;
}

具体策略

class StrategyA implements IRenderStrategy {
  render() {
    return <SubComponentA />;
  }
}

class StrategyB implements IRenderStrategy {
  render() {
    return <SubComponentB />;
  }
}

class StrategyC implements IRenderStrategy {
  render() {
    return <SubComponentC />;
  }
}

策略工厂

class StrategyFactory {
  static createStrategy(strategyType: string): IRenderStrategy {
    switch (strategyType) {
      case 'A':
        return new StrategyA();
      case 'B':
        return new StrategyB();
      case 'C':
        return new StrategyC();
      default:
        throw new Error('Invalid strategy type');
    }
  }
}

React 组件

const MyComponent = () => {
  const strategyType = getStrategyTypeFromBusinessLogic();
  const strategy = StrategyFactory.createStrategy(strategyType);
  return strategy.render();
};

优点

使用策略模式在 React 中的好处包括：