1. 前言

1. react中hook也挺多的,有些简单有些复杂,这里说个 useContext

2. 是什么 what

1. React 提供的一个钩子函数，用于在函数式组件中访问上下文（Context）的值。
2. 上下文（Context）是 React 中一种跨组件层级共享数据的机制，它能够在组件树中传递数据，而不必通过显式的 props 传递。useContext 的作用就是在函数式组件中访问这些共享的上下文数据。

• useContext提供了一种简洁的方式在函数式组件中访问上下文数据，适用于需要在组件之间共享数据的场景。

3. 应用场景

1. 主题切换：通过上下文传递当前的主题样式，不同组件可以根据主题样式进行样式的切换。
2. 用户认证：通过上下文传递用户认证状态，不同组件可以根据用户的认证状态来展示不同的内容。
3. 国际化：通过上下文传递当前的语言环境，不同组件可以根据语言环境展示对应的翻译文本。
4. 全局数据共享：通过上下文传递全局的数据，例如应用的配置信息、共享的数据状态等。

4. 环境安装

1. 创建context
2. 设置provider并通过value接口传递state
3. 局部组件获取读写接口

import React, { createContext, useContext } from 'react';
// 创建一个上下文
const MyContext = createContext();
// 父组件
const ParentComponent = () => {
  const name = 'John';
  return (
    <MyContext.Provider value={name}>
      <ChildComponent />
    </MyContext.Provider>
  );
};
// 子组件
const ChildComponent = () => {
  // 使用 useContext 获取上下文的值
  const name = useContext(MyContext);
  return <h1>Hello, {name}!</h1>;
};
// 渲染应用
const App = () => {
  return <ParentComponent />;
};
export default App;

1. 通过 createContext 创建了一个名为MyContext的上下文对象。
2. 然后，在父组件ParentComponent中，我们将需要共享的数据 name通过 MyContext.Provider 提供给子组件。
3. 接下来，在子组件 ChildComponent 中，我们使用 useContext 钩子来获取上下文中的值，并将其渲染到页面上。

• 为了使子组件能够访问到上下文，必须将其包裹在提供上下文值的父组件的 MyContext.Provider 组件内部。

1. 在实际应用中，可以将需要共享的数据和功能封装到一个上下文对象中，
2. 然后在需要访问这些数据和功能的组件中使用useContext钩子来获取上下文的值。
3. 这样可以方便地在组件之间共享数据，并实现组件之间的解耦。

• redux 也用了provider

1. 也可以理解为 生产者/消费者模式

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉