React 18 系统精讲（九）组件化contextProvider，全局数据传递

1.重点：公共context框架制作

 为了便于以后直接拿来复用，代码如下:

import React,{PropsWithChildren,useState}  from 'react';

interface defaultAPPContextType { //使用interface规定数据类型
    userNanme : string; //声明items是由{id : number , name : string}组成的数组
    shoppingCartData : {items : {id : number , name : string}[]}
}

const defaultAPPContext:defaultAPPContextType = { 
    userNanme : "付旺旺" ,
    shoppingCartData : {items : []}
}

//创建上下文关系并导出（createContext参数必传）
// 导出初始化state值
export const indexContext = React.createContext(defaultAPPContext);

// 导出初始化setState值
export const setStateContext =  //setState是函数，初始化setState值unfined，并规定数据类型
React.createContext<React.Dispatch<React.SetStateAction<defaultAPPContextType>> | undefined>(undefined);

//组件化ContextProvider，注意此处声明的IndexContextProvider首字母必须大写
export const IndexContextProvider:React.FC <PropsWithChildren<{}>> = (props) => {
    const [state,setState] = useState(defaultAPPContext);
    return (
        <indexContext.Provider value={state}> 
            <setStateContext.Provider value={setState}>
                {props.children} 
            </setStateContext.Provider>
        </indexContext.Provider>
    )
}

 2.父组件中：

引入contextProvider，并把想要使用公共数据的组件包裹起来：

 3.robot子组件中加入购物车的逻辑：

 为了方便复用，代码如下：

const addToCart = ()=> { //加入购物车逻辑代码
        if (setState) {
            setState(state => {
                    return{
                        ...state,
                        shoppingCartData:{
                            items: [...state.shoppingCartData.items,{id,name}]
                        }
                    }
                }
            )
        }
    }

4.购物车shoppingCart数据展示代码：

 注：由于shoppingCart是个类组件，不能使用hooks，只能通过appContext.Consumer的方式来获取数据，Robot组件是个函数式组件则能使用hooks