react/context-hooks

React的Context Hooks是React 16.8引入的一个新特性，它使得跨组件状态管理变得更加简单和高效。以下是一些关于Context Hooks的基础知识和使用方法。

基础概念

Context Hooks允许你在一个组件树中跨多层传递数据，而不必一层层手动传递props。

使用步骤

1. 创建一个Context
2. 使用useContext Hook在组件中订阅Context
3. 使用Provider组件包裹需要共享状态的所有组件

代码示例

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

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

// 创建一个Provider组件
const MyProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <MyContext.Provider value={{ count, setCount }}>
      {children}
    </MyContext.Provider>
  );
};

// 使用useContext在组件中订阅Context
const MyComponent = () => {
  const { count, setCount } = useContext(MyContext);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

// 在App组件中使用Provider
const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

export default App;

扩展阅读

更多关于React Context Hooks的内容，可以参考官方文档：React Context Hooks

React Context Hooks