react_context

React Context 是 React 中一个非常重要的概念，它允许我们跨组件传递数据，而不必一层层手动传递 props。下面是一些关于 React Context 的关键点：

什么是 Context？

Context 提供了一种在组件树之间共享那些任何组件都可以访问的数据的方式，而不必显式地通过每一个组件手动传递。

使用 Context 的优势

解耦组件：使用 Context 可以避免在组件树中层层传递 props，从而减少组件之间的耦合。
提高性能：当数据变化时，只有依赖于该数据的组件会重新渲染，而不是整个组件树。

基本用法

import React, { createContext, useContext } from 'react';

// 创建一个 Context 对象
const MyContext = createContext(null);

// 创建一个 Provider 组件，用于包裹需要共享数据的组件树
function MyProvider({ children }) {
  const value = '共享的数据';
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

// 使用 useContext 钩子来获取 Context 中的数据
function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

// 在顶层组件中包裹 MyProvider
function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

扩展阅读

想要了解更多关于 React Context 的信息，可以阅读官方文档。