【掰开揉碎】Context——组件的共享自行车

当我们在 React 中谈到 Context，其实就是一种让组件之间轻松共享数据的方法。想象一下，你有一些信息，比如用户认证状态、主题样式或者其他全局数据，而你想让所有组件都能方便地访问这些信息，而不需要一级一级地传递给每个组件。

首先，你需要创建一个 Context。这就像是一个数据的容器，让你能够往里面放一些信息，然后其他组件可以从这个容器里拿到这些信息。

const MyContext = React.createContext();

然后，你需要在某一级的组件上，使用 MyContext.Provider 来包裹住你想要分享数据的子组件，并通过 value 属性传递数据。

<MyContext.Provider value={/* 共享的数据 */}>
  {/* 这里是你的子组件 */}
</MyContext.Provider>

接下来，你可以在任何一个子组件中使用 MyContext.Consumer 来订阅这个数据。

<MyContext.Consumer>
  {value => /* 在这里使用共享的数据 */}
</MyContext.Consumer>

近版本的 React 还引入了一个更简洁的方式，使用 useContext 这个 Hook，让你在函数组件中更轻松地获取到共享的数据。

const value = React.useContext(MyContext);
// 在这里使用共享的数据

总的来说，React 中的 Context 就是为了让数据在组件之间能够更方便地传递和共享而设计的一套机制。通过创建 Context，设置 Provider，然后在需要的地方使用 Consumer 或者 useContext，你就能够很轻松地实现组件之间的数据共享。