React Context 教程

React Context 提供了一种在组件树之间进行数据传递的方法，无需明确地逐层手动传递 props，从而简化了组件之间的数据共享。

快速入门

创建 Context 使用 React.createContext 创建一个 Context 对象。
```
const MyContext = React.createContext();
```
Provider 组件 使用 Provider 组件包裹你的应用或组件树，并传递 value 属性。
```
<MyContext.Provider value="Hello, Context!">
  {/* 组件树 */}
</MyContext.Provider>
```
消费 Context 使用 useContext 钩子或 <MyContext.Consumer> 标签来访问 Context 的值。
```
const value = useContext(MyContext);
```

实战案例

假设我们有一个计数器应用，需要将计数器的值共享给多个组件。

// Counter.js
import React, { useState, useContext } from 'react';
import MyContext from './MyContext';

const Counter = () => {
  const value = useContext(MyContext);
  return (
    <div>
      <p>Count: {value.count}</p>
      <button onClick={value.increment}>Increment</button>
    </div>
  );
};

export default Counter;

// App.js
import React from 'react';
import Counter from './Counter';
import MyContext from './MyContext';

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

  const contextValue = {
    count,
    increment: () => setCount(count + 1),
  };

  return (
    <MyContext.Provider value={contextValue}>
      <h1>React Context Counter</h1>
      <Counter />
    </MyContext.Provider>
  );
};

export default App;

扩展阅读

想要了解更多关于 React Context 的内容，可以阅读官方文档.

<center><img src="https://cloud-image.ullrai.com/q/React_Context/" alt="React_Context"/></center>