在React中，Context 提供了一个无需在组件树中逐层传递props，就能在组件树间共享数据的方法。这是一个非常强大的特性，特别适用于大型应用中需要在不同层级的组件间共享数据的场景，比如主题、用户信息、偏好设置等。
什么是Context？
Context 设计目的是为了共享那些对于整个应用程序或部分应用程序来说“全局”的数据，它的本质是一种提供者模式（Provide-Subscribe）。Context 提供了一种方式，允许数据从组件树的顶部提供一个值，然后任何下面的组件都可以访问到这个值，无需通过props手动传递。
如何创建Context
创建一个Context对象非常简单，使用React.createContext() API 即可生成一个新的Context对象。这个对象有两个属性：Provider 和 Consumer。
const MyContext = React.createContext(defaultValue);
// MyContext.Provider
// MyContext.Consumer
这里的defaultValue是Context的默认值，当组件上层没有Provider时，可以用这个值作为默认值。
使用Context
使用Context分为两个步骤：
- Provider: 在组件树的上方提供数据。
- Consumer: 在下方的组件中订阅并消费数据。
Provider
MyContext.Provider是一个React组件，它接受一个value属性，这个属性就是你想要共享给子组件的数据。在你的组件树中，你可以通过将value传递给Provider来提供数据。
<MyContext.Provider value={
someData}>
<ChildComponent />
</MyContext.Provider>
这样，someData就会被传递到下面的所有子组件中。
Consumer
在任何深层次的子组件中，可以使用MyContext.Consumer订阅到这个数据。这个消费者组件接受一个函数作为子组件，这个函数接收一个数据参数，也就是Provider提供的数据。
<MyContext.Consumer>
{
data => /* render something based on the data */}
</MyContext.Consumer>
或者使用更简洁的function as child component模式：
<MyContext.Consumer>
{
data => <div>{
data}</div>}
</MyContext.Consumer>
Context的优势
- 简化多层组件的数据传递：不需要每层逐级传递props，减少了冗余代码。
- 易于重用和组合：不同的Context可以组合使用，灵活适应不同场景。
- 解决prop drilling问题：避免不断地向深层组件传递props，提高了代码的可维护性。
注意事项
- 只有类组件的情况：在类组件中，需要在
render方法中使用Consumer，或者使用静态方法contextType。 - Context的更新：当Context的值发生变化时，使用该Context的组件会重新渲染。
- 性能考虑：频繁的重渲染可能影响性能，应合理使用shouldComponentUpdate或React.memo进行优化。
- 结合使用State和Reducer：Context常常与React的useState和useReducer Hooks一起使用，管理复杂的状态。
总结：
React中的Context为组件间的状态共享提供了一种简单而强大的机制。通过创建Provider和Consumer，可以轻松地在不同的组件之间共享数据，而不需要在组件层次结构中逐层传递props。尽管Context功能强大，但在使用时仍需注意其对性能的影响，以及适当地管理Context的值。
