1. 前言
- react 好久没写啥文章了
- 之前写了篇文章react兄弟组件共享状态
- 这其实也能用于 父子组件
- 这里再做个梳理
2. 思路
- 将共享状态 提升到最近的公共组件/父组件中,由父组件管理这个状态
- 公共父组件 功能
- 提供共享状态
- 提供操作共享状态的方法
3. createContext
- 创建 上下文
- 单独目录存放
/src/utils/context.jsx- 因为方便管理
- 相关代码
import { createContext } from "react"; // 存储 context export const slotContext = createContext(); // 按需导出 因为 会创建 很多个 export const carContext = createContext(); export const msgContext = createContext();
4. 父组件
- 引入创建的上下文
- 包裹需要共享的子组件
- 提供共享数据
- 相关js代码
const [count, setCount] = useState(1000); const [name, setName] = useState({job:'web'});
- 相关 布局代码
<msgContext.Provider value={ {count,setCount,name} }> <SonCom num={count} callFn={setCount} /> <BrotherCom /> {/* <BrotherCom2/> */} {/* <BrotherCom3/> */} {/* <BrotherCom4/> */} </msgContext.Provider>
msgContext是创建的上下文msgContext.Provider提供/注入/ 生产者模式/工厂- 提供/注入/生产的 产品通过value 给消费者/子组件
- value的值 是变量,一般是对象,这样可以传递多个值
5. 子组件使用 ----useContext
- 根据传递过来的是 对象 ,接受也可以用对象的解构来接收
- 因为这里
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. 后记
- 就是 相当于 一个简单的 事件总线/event Bus
- 这种模式如果往上提 提到 react入口 index.js里面就是全局的
- react-redux,在 入口注入
store也就是这样的
