hooks使用之useContext

上下文: 因为后期像react-router redux 之类的这些库基本上用的全是上下文 那么你要去懂他们原理或者源码手写react-router你就必须要有上下文的基础

定义: 允许组件之间通过除了props以外的情况去共享数据

一旦你的属性传递超过了4层 你就应该考虑一下是否使用上下文

上下文这个多数情况下是用来做全局数据管理的

1. 创建上下文: createContext

       //   src/context/themeContext.js
       import {createContext} from 'react'
       // 一般大写开头
       const ThemeContext = createContext('light')
       export default ThemeContext

2. 注册上下文: ThemeContext.Provider

   import ThemeContext from './context/themeContext'
   
   const [theme, setTheme] = useState()
   function App() {
       return (
           <div>
               <ThemeContext.Provider value={theme}>
   
                   <其他组件 />
                   // ....
               </ThemeContext.Provider>
   
               <button  onClick={() => {
                   setTheme(theme === 'dark' ? 'light' : 'dark')
               }}>Toggle</button>
   
           </div>
       )
   }

3. 接入useContext

   import {useContext} from 'react'
   import ThemeContext from './context/themeContext'
   
   export default function Demo() {
       const contextValue = useContext(ThemeContext)
   
       return (
           <div style={background-color: contextValue  === 'light' ? 'xxxx' : 'YYY'}></div>
       )
   }