React Context API 是一个在 React 中用于跨组件传递数据的机制。它允许你避免通过多层组件手动传递 props，从而简化组件间的数据传递。

优势

  • 无需手动传递 props：Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
  • 树形结构组件共享数据：Context 使得组件树中任意层级的组件都可以访问相同的数据。

使用方法

  1. 创建一个 Context 对象。
  2. 使用 React.createContext() 创建一个 Context 对象。
  3. 将 Context 对象传递给组件树中的 Provider 组件。
  4. 在 Provider 组件内部，使用 value 属性传递数据。
  5. 在需要数据的组件中，使用 useContext() 钩子获取数据。

示例

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

const CountContext = createContext();

function App() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Counter />
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

更多关于 React Context API 的信息，可以查看官方文档。

图片

  • React Context API