面试题：React 条件渲染在复杂业务场景下的架构设计

Question

在一个电商 React 应用中，商品展示页面需要根据多种条件进行渲染。这些条件包括用户所在地区（决定展示的商品库存和价格）、用户会员等级（决定展示的促销信息和专属商品）、商品类别（决定展示的详细信息结构）等。同时，这些条件之间可能存在复杂的相互依赖关系。请设计一个整体的条件渲染架构，包括如何组织组件结构、管理状态以及确保代码的可维护性和扩展性，阐述你所使用的设计模式和 React 特性。

Answer 1

组件结构组织

1. 创建高阶组件（HOC）：创建一个高阶组件，例如 ConditionalRenderHOC，用于包裹商品展示组件。这个 HOC 负责获取和处理所有相关条件，并将处理后的结果作为 props 传递给商品展示组件。
2. 分层组件：将商品展示拆分为不同层次的组件，比如 ProductList 负责整体布局，ProductItem 负责单个商品展示。这样在不同条件下，可以方便地复用和替换不同层次的组件。

状态管理

1. 使用 React Hook（useState 和 useContext）：
   • useState：在 ConditionalRenderHOC 中使用 useState 来管理本地状态，如获取到的用户所在地区、会员等级等。
   • useContext：创建一个上下文（Context），例如 AppContext，将一些全局共享的状态（如用户信息等）放入其中，这样不同层次的组件可以方便地获取这些状态，而不需要通过层层传递 props。
2. Redux（可选）：如果应用规模较大，状态管理较为复杂，可以引入 Redux。将所有与条件渲染相关的状态放在 Redux 的 store 中统一管理。通过 actions 来触发状态变化，reducers 来处理这些变化，确保状态的一致性和可预测性。

设计模式

1. 策略模式：对于不同条件下的渲染逻辑，采用策略模式。例如，创建不同的渲染策略函数，根据用户会员等级决定展示不同的促销信息。在 ConditionalRenderHOC 中，根据不同条件选择合适的策略函数来进行渲染。
2. 依赖倒置原则：通过将条件判断和渲染逻辑抽象出来，使得组件之间的依赖关系更加清晰。具体组件不直接依赖于具体的条件判断逻辑，而是依赖于抽象的策略函数，这样在条件变化时，只需要修改策略函数，而不需要修改大量组件代码。

React 特性利用

1. JSX 条件渲染：在组件内部，使用 if - else 或者 && 运算符进行条件渲染。例如，在 ProductItem 组件中，根据商品类别决定展示不同的详细信息结构。
2. React.lazy 和 Suspense：如果某些组件（如与特定会员等级相关的专属商品组件）比较庞大，可以使用 React.lazy 和 Suspense 进行懒加载，提高页面加载性能。在条件渲染时，根据用户会员等级动态加载这些组件。

通过以上架构设计，可以有效地管理电商 React 应用中商品展示页面的条件渲染，提高代码的可维护性和扩展性。