useContext
:可访问全局状态,避免一层层的传递状态。这符合Redux
其中的一项规则,就是状态全局化,并能统一管理。
useReducer
:通过action的传递,更新复杂逻辑的状态,主要是可以实现类似Redux
中的Reducer
部分,实现业务逻辑的可行性。
import React, { useContext, createContext,useReducer} from 'react'; function ShowArea(){ const {color} = useContext(ColorContext) return (<div style={{color:color}}>字体颜色为{color}</div>) } function Buttons(){ const { dispatch } = useContext(ColorContext) return ( <div> <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"red"})}}>红色</button> <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"yellow"})}}>黄色</button> </div> ) } export const ColorContext = createContext({}) export const UPDATE_COLOR = "UPDATE_COLOR" const reducer= (state,action)=>{ switch(action.type){ case UPDATE_COLOR: return action.color default: return state } } export const Color = props=>{ const [color,dispatch]=useReducer(reducer,'blue') return ( <ColorContext.Provider value={{color,dispatch}}> {props.children} </ColorContext.Provider> ) } function App(){ return ( <div> <Color> <ShowArea /> <Buttons /> </Color> </div> ) } export default App;