react-hooks: useContext

React的useContext应用场景：

如果需要在组件之间共享状态，可以使用useContext()。

举个🌰:

场景：现有两个组件Navbar和Messages，希望他们之间共享状态。

<div className="test">
    <Navbar />
    <Messages />
</div>

使用方法如下：

一、在两个组件的父组件上使用React的Context API，及在组件外部建立一个Context。

const TestContext = React.createContext({});

• 父组件封装代码如下:
  TestContext.Provider提供了一个Context对象，这个对象是可以被子组件共享的。

import React from "react";
const TestContext= React.createContext({});
<TestContext.Provider 
    value={{
        username: 'superawesome',
    }}
>
    <div className="test">
        <Navbar />
        <Messages />
    </div>
<TestContext.Provider/>

• Navbar组件代码如下（Message组件的代码也类似）：
  useContext()钩子函数用来引入Context对象，从中获取username属性。

import React, { useContext } from "react";
const Navbar = () => {
    const { username } = useContext(TestContext);
    return (
        <div className="navbar">
            <p>{username}</p>
        </div>
    )
}

⚠️⚠️⚠️扩展知识：Navbar组件访问context的另一种方式：
组件引入TestContext并调用context，使用TestContext.Consumer（消费者）

import TestContext from "父组件";
const Navbar = () => {
    return (
        <TestContext.Consumer>
            {
                    context => {
                      return (
                        <div> {context.useName} </div>
                      )
                    }
                }
          </TestContext.Consumer>
    )
}

参考链接：

• React Hook之useContext的介绍与使用