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
 
 
原文地址:https://www.cnblogs.com/MDGE/p/13854386.html