React学习: context 与 provider

在使用 react的时候，经常会遇到 provider，这篇文章想简单写一下这2个在实际项目里的关系

react-provider-consumer

场景

React 上下文为组件提供数据，无论它们在组件树中的深度如何。上下文用于管理全局数据，例如全局状态、主题、服务、用户设置等。

使用

ctx = createContext(默认值)
使用 ctx.Provider
消费全局值

创建 context

import { createContext } from 'react';
const Context = createContext('Default Value');

使用 provider

function Main() {
  const value = 'My Context Value';
  return (
    <Context.Provider value={value}>
      <MyComponent />
    </Context.Provider>
  );
}

消费

方式1，推荐，使用 hook 来达到目的. useContext

import { useContext } from 'react';
function MyComponent() {
  const value = useContext(Context);
  return <span>{value}</span>;
}

方式2，使用组件方式 Context.Consumer

function MyComponent() {
  return (
    <Context.Consumer>
      {value => <span>{value}</span>}
    </Context.Consumer>
  );
}

原理图

何时使用

global state
theme
application configuration
authenticated user name
user settings
preferred language
a collection of services

参考

https://dmitripavlutin.com/react-context-and-usecontext/