1. 前言

1. react 好久没写啥文章了
2. 之前写了篇文章react兄弟组件共享状态
3. 这其实也能用于 父子组件
4. 这里再做个梳理

---

2. 思路

1. 将共享状态 提升到最近的公共组件/父组件中,由父组件管理这个状态
2. 公共父组件 功能
3. 提供共享状态
4. 提供操作共享状态的方法

---

3. createContext

1. 创建 上下文
2. 单独目录存放/src/utils/context.jsx
3. 因为方便管理
4. 相关代码

import { createContext } from "react";

// 存储 context
export const slotContext = createContext();
// 按需导出 因为 会创建 很多个
export const carContext = createContext();
export const msgContext = createContext();

---

4. 父组件

1. 引入创建的上下文
2. 包裹需要共享的子组件
3. 提供共享数据
4. 相关js代码

  const [count, setCount] = useState(1000);
  const [name, setName] = useState({job:'web'});

5. 相关 布局代码

      <msgContext.Provider value={ {count,setCount,name}  }>
        <SonCom num={count} callFn={setCount} />
        <BrotherCom />
        {/* <BrotherCom2/> */}
        {/* <BrotherCom3/> */}
        {/* <BrotherCom4/> */}
      </msgContext.Provider>

---

6. msgContext 是创建的上下文
7. msgContext.Provider 提供/注入/ 生产者模式/工厂
8. 提供/注入/生产的 产品通过value 给消费者/子组件
9. value的值 是变量,一般是对象,这样可以传递多个值

---

5. 子组件使用 ----useContext

1. 根据传递过来的是 对象 ,接受也可以用对象的解构来接收
2. 因为这里useContext的参数就是 之前创建的上下文,方便访问,所以才把所有的上下文 单独抽离出来

import React, { useContext } from "react";
import {msgContext} from "../utils/context"
export default function BrotherCom() {
//   生产者提供的 生产对象  对象的解构
    const  {count,setCount,name}  =   useContext(msgContext)
    return (
    <div className="box">
      <div className="my-title">兄弟组件</div>
      <h2>{count}</h2>
      <button onClick={()=>{
        setCount(count+100)
      }}>修改</button>
      <h2>{name.job}</h2>
    </div>
  );
}

---

6. 后记

1. 就是 相当于 一个简单的 事件总线/event Bus
2. 这种模式如果往上提 提到 react入口 index.js里面就是全局的
3. react-redux,在 入口注入 store也就是这样的

---

参考资料

父子组件传参
react-redux

---

初心

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

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

共勉