raact中的useContext-全局状态 如何使用？

使用目标：

useContext步骤：

共3步：

1. 在根组件中，导入并调用createContext方法，得到Context对象，导出

   import { createContext } from 'react'
   export const Context = createContext()

2. 使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据

   return (
     <Context.Provider value={ 这里放要传递的数据 }>
       <根组件的内容/>
     </Provider>
   )

   

3. 在任意后代组件中，如果希望获取公共数据：

   在son.js中导入useContext；调用useContext(第一步中导出的context) 得到value的值

   import React, { useContext } from 'react'
   import { Context } from './index'
   const 函数组件 = () => {
       const 公共数据 = useContext(Context)
       return ( 函数组件的内容 )
   }  

   

   效果：