import React from 'react';
import { UserProvider, UserConsumer } from './context';
import Panel from './demo';

const Test = () => {
  return (
    <UserProvider>
      <Panel />
    </UserProvider>
  )
}
export default Test

import React from 'react';
let UserContext;
const { Provider, Consumer } = UserContext = React.createContext();
// Context.Consumer, Context.Provider

class UserProvider extends React.Component {
  state = {
    currentUser: "foo"
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        currentUser: "bar"
      })
    }, 6000)
  }

  render() {
    return (
      <Provider
        value={{
          user: this.state.currentUser,
        }}
      >
        {this.props.children}
      </Provider>
    );
  }
}

export { UserProvider, Consumer as UserConsumer, UserContext };

import React, { useContext } from 'react';
import { UserContext } from './context';

const Panel = () => {
  const { user } = useContext(UserContext);
  return (
    <p>{user}</p>
  )
}

export default Panel