5、React 高级组件模式：Provider 与 Composite 模式解析

React 高级组件模式：Provider 与 Composite 模式解析

在 React 开发中，合理运用组件模式对于构建高效、可维护的应用程序至关重要。本文将深入探讨两种重要的组件模式：Provider 模式和 Composite 模式，并通过实际案例展示它们的应用和优势。

1. Provider 模式

Provider 模式最初可能看似过度优化，但在大型应用中，其优势会逐渐显现。当应用中有多个上下文时，使用普通的 useContext 钩子可能会导致组件不必要的额外更新，而 useContextSelector 可以有效避免这种情况。

1.1 使用 recontextual 工具创建类型化可选择上下文

为了更方便地创建类型化的可选择上下文，我们可以使用 recontextual 工具。以下是一个使用 recontextual 实现暗黑模式的示例代码：

import {
  useState,
  useCallback,
  memo,
  PropsWithChildren,
  ComponentPropsWithoutRef,
} from "react";
import recontextual from "recontextual";

interface DarkModeContext {
  isDarkMode: boolean;
  toggle: () => void;
}

const [Provider, use