react-hooks:useContext

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

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

父组件

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

子组件

useContext()钩子函数用来引入Context对象，
从中获取username属性。

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