ReactHooks——useReducer

申明一个reducer

import React, { createContext, useReducer } from 'react';

export const ColorContext = createContext({})
export const ChangeText = "CHANGETEXT"
const chengefn=(state:any,action:any)=>{
    switch(action.type){
        case 'CHANGETEXT':
            return state= action.text
        default:
            return state = "瞧你的那个样"
    }
}
export const Text = (props:any)=>{
    const [text,dispatch] = useReducer(chengefn,'你爱我')
    return (
        <ColorContext.Provider value={{text,dispatch}}>
            {props.children}
        </ColorContext.Provider>
    )
}

主动修改页面和使用页面

import React, { useContext, useEffect } from "react";
import { ColorContext,ChangeText } from "./mider";
const ShowText=()=>{
    const Text:any = useContext(ColorContext)
    const {dispatch,text}  = Text
    useEffect(()=>{
        console.log(dispatch)
        console.log(text)
    },[])
    return(
        <div >
           <div onClick={()=>{dispatch({type:'CHANGETEXT',text:"都不爱"})}}>
               点我主动
           </div>
           <div onClick={()=>{dispatch({type:'qiqi123',text:"自己改变"})}}>
               点我自己变
           </div>
           <div>
            {text}
           </div>
        </div>
    )
}
export default ShowText

加载页面

import React,{useContext} from "react";
import ShowText from "./ShowText";
import { Text } from "./mider";

const UesDuc = () => {
  return (
    <div>
      <Text>
        <ShowText></ShowText>
      </Text>
    </div>
  );
};
export default UesDuc;