react hooks 基于 useContext 与 useReducer 跨组件通信的封装

先看官方文档

链接: useContext

链接: useReducer

链接: 使用 Reducer 和 Context 进行状态扩展

基于官方文档 对组件进行封装
StoreContent.jsx

下面展示一些 内联代码片。

// An highlighted block

import React,{useReducer,useContext} from "react";
const ReactContent = React.createContext()

function StoreContent({children}){

    function reducer(state,action={}){
        let returnObj =  {
            ...state,
            [action.type]:action[action.type]
        }
        console.log(122222,returnObj)
        return returnObj
    }

    const storeObj = {
        name:'yc',
        age:20,
        sex:'男'
    }

    const [state,dispatch] = useReducer(reducer,storeObj)

    //制作一个仓库桶 来装需要用到context的组件
    return(

    <ReactContent.Provider value={[state,dispatch]}>
        {children}
    </ReactContent.Provider>

    )
}


export function useReactContentFun(){
    return useContext(ReactContent)
}


export default StoreContent

index.jsx

下面展示一些 内联代码片。

// An highlighted block

import React from "react";

// 仓库文件桶
import StoreContent from "./StoreContent";

import SetDataBtn from './SetDataBtn'

import ShowDataBox from './ShowDataBox'

function Index() {

    return (<>

        <StoreContent>
            {/*  将需要用到的全局变量的组件 都放在 仓库桶里面 */}
            <div>
                <div>
                    <SetDataBtn></SetDataBtn>
                </div>
                <div>
                    <ShowDataBox></ShowDataBox>
                </div>
            </div>

        </StoreContent>


    </>)

}

export default Index

调试验证文件
下面展示一些 内联代码片。

// An highlighted block


import {useReactContentFun} from './StoreContent'

function SetDataBtn(){
    const [state,dispatch] = useReactContentFun()
    return (
        <div>
            <button onClick={()=>{dispatch({type:'name',name:'jsonYc'})}}> 设置名字</button>
            <button onClick={()=>{dispatch({type:'age',age:Number(state.age)+1})}}> 年龄+1</button>
            <button onClick={()=>{dispatch({type:'age',age:Number(state.age)-1})}}> 年龄-1</button>
            <button onClick={()=>{dispatch({type:'sex',sex:(state.sex =='女'?'男':'女')})}}> 性别</button>
        </div>
    )
}

export default SetDataBtn

// An highlighted block

import {useReactContentFun} from './StoreContent'

function ShowDataBox(){

    const [state,dispatch] = useReactContentFun()

    


    return(
        <>
        <div>
            <p>
                名称：{state.name}
            </p>
            <p>
                年龄：{state.age}
            </p>
            <p>
                性别：{state.sex}
            </p>
        </div>
        </>
    )


}

export default ShowDataBox