首先指出:使用useContext创建的对象负责数据的管理,也即是数据的共享,而使用useReducer负责共享数据的更新,每一次数据更新会导致页面重新渲染。
1.父组件
constaMyContext = createContext({}); //创建Context,管理共享数据
const defaultState = { //存储数据的默认defaultState
count:0,
total:0,
}
function reducer(state=defaultState,action) { ///reducer负责操作数据
if(action.type==="add") {
console.log("add");
return {...state,total:state.total+1}
}
return state;
}
function Father() { //父组件
const [store,dispatch] = useReducer(reducer,defaultState);//创建reducer
return (
// 通过 state传递上下文 状态
<MyContext.Provider value={{store,dispatch}}> //MyContext.Provider下的组件均会获得
<Counter shop={'一'}/> //value 提供的{store,dispatch}对象
<Counter shop={'二'}/> //都可以被子组件Counter获取到
</MyContext.Provider>
)
}
2.子组件:
function Counter(props) {
const {store,dispatch} = useContext(MyContext);//使用MyContext获得value传入的对象,并解构
return ( //至此,子组件获得带有数据的store和操纵
<div> //数据行为的dispatch。
<h3>面馆{props.shop}</h3>
<h2>老板,来{store.count}碗{size(big)}碗{type}</h2>
<h4>{`总共发行${store.total}碗面`}</h4>
<button onClick={()=>(dispatch({type:"add"}))} style={{"height":"40px"}}>加一碗</button>
</div>
);
}