Provider 管理独立上下文

Provider 是什么？

React 的 Provider 是一个组件，它用于在 React 应用中实现上下文（context）传递。它允许你将数据和函数传递给组件树中的任何地方，而无需手动在每个组件中传递 props。这对于全局数据（如主题，用户偏好等）的管理特别有用。

Provider 通常与 React Context API 一起使用。

1、创建一个 Context: 首先，你需要使用 React.createContext 创建一个新的 Context 对象。这个对象将包含一个 Provider 组件和一个 Consumer 组件。

const MyContext = React.createContext(defaultValue);

2、使用 Provider: Provider 接受一个 value 属性，该属性包含你想要提供给组件树的数据。所有包裹在 Provider 内的组件都能访问这些数据。

<MyContext.Provider value={/* some value */}>
  {/* 子组件 */}
</MyContext.Provider>

上下文内容的独立性

当多个组件引用同一个 Provider 并传递不同的入参时，每个 Provider 实例的上下文内容将是独立的，与其它实例的内容不同。

在 React 中，每当你使用 <Provider> 组件并为其传递 props 时，你实际上是在创建该 Provider 的一个新的实例，其上下文内容由传递给它的 props 决定。

每个 Provider 实例维护自己的状态和逻辑，这取决于它所接收的 props。这意味着：

不同实例的独立性: 如果你在不同的组件树部分中分别使用相同的 Provider，并为每个实例传递不同的 props，那么这些 Provider 实例将各自维护自己的状态和逻辑。它们不会相互影响。
子组件的上下文访问: 当组件使用 useContext（或相应的 Consumer）来访问上下文时，它将获取最近的 Provider 实例所提供的上下文内容。这意味着，即使有多个不同的 Provider 实例，组件仍然会从其上层最近的那个 Provider 接收上下文。

假设有一个 ThemeContext.Provider，用于设置主题色：

const ThemeContext = React.createContext();

const App = () => {
  return (
    <div>
      <ThemeContext.Provider value={{ theme: 'dark' }}>
        <ComponentA /> {/* 这里将使用 'dark' 主题 */}
      </ThemeContext.Provider>
      <ThemeContext.Provider value={{ theme: 'light' }}>
        <ComponentB /> {/* 这里将使用 'light' 主题 */}
      </ThemeContext.Provider>
    </div>
  );
};

const ComponentA = () => {
  const context = useContext(

ThemeContext);
  return <div style={{ color: context.theme === 'dark' ? 'white' : 'black' }}>ComponentA</div>;
};

const ComponentB = () => {
  const context = useContext(ThemeContext);
  return <div style={{ color: context.theme === 'dark' ? 'white' : 'black' }}>ComponentB</div>;
};

在这个例子中：

ComponentA 将从它上方的 ThemeContext.Provider 获取上下文，其中 theme 被设定为 'dark'。
ComponentB 将从另一个 ThemeContext.Provider 获取上下文，其中 theme 被设定为 'light'。

每个 Provider 实例创建了自己独立的上下文环境，因此不同的组件会根据它们所属的 Provider 实例获得不同的上下文内容。这种机制使得在 React 应用中灵活地控制和管理状态变得可能。

实际使用示例

以下是使用 useContext 的一些示例：

示例 1: 主题切换

假设你有一个需要根据用户偏好改变主题的应用。

创建一个 Context:

const ThemeContext = React.createContext('light');

创建一个使用该 Context 的组件:

使用 useContext 钩子直接访问 ThemeContext。

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? 'black' : 'white' }}>I am styled by theme context!</button>;
}

在应用中提供 Context:

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

示例 2: 用户认证

在此示例中，我们将使用 useContext 来传递并使用用户信息。

创建一个 User Context:

const UserContext = React.createContext();

创建一个使用该 Context 的组件:

使用 useContext 钩子来获取用户信息。

function Navbar() {
  const user = useContext(UserContext);
  return <div>Hello, {user.name}!</div>;
}

在应用中提供 Context:

function App() {
  const user = { name: 'Alice', loggedIn: true };

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      {/* 其他组件 */}
    </UserContext.Provider>
  );
}

示例 3：文件上传组件

首先，假设我们有一个应用场景，其中需要上传文件，并在多个组件中共享文件上传的状态和逻辑。我们将创建一个 UploadProvider 组件来实现这一点。

创建 Context:

const UploadContext = React.createContext(null);

定义 UploadProvider 组件:

const UploadProvider = ({ children }) => {
  const [files, setFiles] = useState([]); // 文件列表状态
  const [uploading, setUploading] = useState(false); // 上传状态

  // 文件上传逻辑
  const uploadFiles = async () => {
    setUploading(true);
    // 假设的上传逻辑
    await someUploadFunction(files);
    setUploading(false);
  };

  // 提供给子组件的值
  const value = {
    files,
    setFiles,
    uploading,
    uploadFiles
  };

  return (
    <UploadContext.Provider value={value}>
      {children}
    </UploadContext.Provider>
  );
};

使用 UploadProvider:

在应用的根组件或任何其他组件中包裹需要访问上传状态和逻辑的子组件。

function App() {
  return (
    <UploadProvider>
      {/* 其他子组件将能够访问文件上传的状态和逻辑 */}
      <YourComponent />
    </UploadProvider>
  );
}

在子组件中使用 Context:

子组件可以通过 useContext 钩子访问和使用文件上传的状态和逻辑。

function YourComponent() {
  const { files, setFiles, uploading, uploadFiles } = useContext(UploadContext);

  // 组件逻辑，如上传按钮的处理函数
  const handleUpload = () => {
    uploadFiles();
  };

  return (
    <div>
      {uploading ? <p>Uploading...</p> : <button onClick={handleUpload}>Upload Files</button>}
      {/* 其他 UI 元素 */}
    </div>
  );
}

在这个例子中，UploadProvider 组件管理文件的状态和上传逻辑，同时通过 UploadContext 将这些状态和逻辑提供给任何嵌套在它内部的子组件。这样，子组件可以轻松地访问文件列表、检查上传状态以及触发上传动作，而无需将这些状态和逻辑作为 props 传递给每个子组件。这使得代码更加模块化和可维护。

Provider 是什么？​

上下文内容的独立性​

实际使用示例​

示例 1: 主题切换​

示例 2: 用户认证​

示例 3：文件上传组件​