useContext源码解读
function useContext(context){
console.log(context._currentValue)
return context._currentValue;
}
let CounterContext = React.createContext();
function App(){
const [state,setState] = React.useState({number:0});
return (
<CounterContext.Provider value={{state,setState}}>
<Counter/>
</CounterContext.Provider>
)
}
我们在Counter组件中也会通过let {state,setState} = useContext(CounterContext)
在项目中我们用到mobx,然而又想用hooks开发,我们此时可以在index.js加一层
const sto = {
commonStore
}
通过const CrContext = React.createContext(sto)创造一个 Provider
export {
CrContext
}
此时 <CrContext.Provider value={sto}>
我们再其他组件里面就可以通过 useContext(CrContext)
但是我们决定封装一层公用的 useContext文件
我们再store文件夹里面新建一个文件useStore
创造一个函数 const useStores = ()=>{
const stores = useContext(CrContext)
return stores
}
那这样我们在别的文件中使用 就是useStores