React Context API 简介

React Context API 是 React 中的一个高级特性，它允许你将数据传递给组件树中更深的组件，而无需一层层手动传递 props。

主要特点

全局状态管理：允许在组件树中共享状态，而不必一层层传递 props。
组件树解耦：减少了组件之间的依赖，使组件更加独立。
性能优化：避免不必要的渲染，提高性能。

使用场景

共享全局状态：例如，用户认证状态、主题配置等。
跨组件通信：例如，在复杂的组件树中，需要从顶层组件传递数据到深层组件。

快速开始

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

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

// 创建一个 Provider 组件
function MyProvider({ children }) {
  const value = 'Hello, World!';
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

// 使用 Context 的组件
function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

// 在顶层组件中使用 Provider
function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

图片示例

更多关于 React Context API 的内容