如何方便高效使用useContext，你学会了吗？

useContext案例代码，参考如下：

import React, { createContext, useContext, useState } from 'react'

import './index.scss'

/**

 * 颜色主题上下文

 */

const ThemeConext = createContext<string>('')

/**

 * 类似Vue的provide/inject

 */

const UseContext: React.FC = () => {

  const [theme, setTheme] = useState<string>('blue')

  return (

    <div>

      <ThemeConext.Provider value={theme}>

        <h1>UseContext</h1>

        <p>

          <button onClick={() => setTheme('red')}>改变主题色</button>

        </p>

        <Child1 />

      </ThemeConext.Provider>

    </div>

  )

}

function Child1() {

  return (

    <div>

      <Child2 />

    </div>

  )

}

function Child2() {

  const theme = useContext(ThemeConext)

  return (

    <div className={theme}>

      <p>千山鸟飞绝，万径人踪灭</p>

      <p>孤舟蓑笠翁，独钓寒江雪</p>

    </div>

  )

}

export default UseContext