React中useContext(全局公共状态)的使用

关于使用useContext的固定套路有以下几个步骤:

(一) 导入并调用createContext,得到Context对象并导出.

import { useContext } from 'react'
export const Context = React.createContext()   //  这里有导出 

(二) 使用Provider组件包裹根组件,并通过value属性提供要共享的数据.

    return (
        <Context.Provider value={要传递的状态}>
            <根组件内容 />
        </Context.Provider>
    )

(三) 在后代组件中调用useContext,然后导入父组件中的Context.

import React, { useContext } from 'react'
import { Context } from './index'

const 公共数据 = useContext(Context)

前两个步骤走完后,就可以在任意后代组件中调用到公共状态了.