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