使用在_app.js中实现的React.createContext()

React.createContext() 是 React 中的一个 API，用于创建一个上下文对象（Context），以便在组件树中共享数据，而不必显式地通过 props 逐层传递。这在处理跨多个组件的全局状态或配置时非常有用。

基础概念

Context 提供了一种在组件之间共享数据的方式，避免了通过中间组件传递 props 的繁琐过程。这对于主题、用户偏好、UI 设计等全局设置特别有用。

创建 Context

在 _app.js 或任何其他顶层组件中，你可以这样创建一个 Context：

import React from 'react';

const MyContext = React.createContext();

提供 Context

使用 Context.Provider 组件包裹需要访问该 Context 的子组件，并通过 value 属性传递数据：

<MyContext.Provider value={{ theme: 'dark', user: { name: 'John' } }}>
  <App />
</MyContext.Provider>

消费 Context

在子组件中，你可以使用 useContext 钩子或 Context.Consumer 来访问 Context 中的数据：

import React, { useContext } from 'react';

function ThemedButton() {
  const { theme } = useContext(MyContext);
  return <button className={theme}>Click me</button>;
}

优势

简化组件间的数据传递：避免了 props drilling 的问题。
提高代码的可维护性：全局状态管理更加集中。
灵活性：可以在任何层级的组件中访问 Context 数据。

类型

Provider：提供数据的组件。
Consumer：消费数据的组件。
createContext：创建 Context 对象的函数。

应用场景

主题切换：如深色模式和浅色模式。
国际化：根据用户偏好显示不同语言的内容。
用户认证状态：在应用的任何地方都能获取当前用户的登录状态。

遇到的问题及解决方法

问题：Context 更新可能导致不必要的重新渲染。

原因：当 Context 的值发生变化时，所有消费该 Context 的组件都会重新渲染，即使它们只依赖于 Context 中的一部分数据。

解决方法：

拆分 Context：将 Context 拆分为多个较小的 Context，每个 Context 只包含相关的数据。
拆分 Context：将 Context 拆分为多个较小的 Context，每个 Context 只包含相关的数据。
使用 useMemo 或 useCallback：在 Provider 中使用这些钩子来缓存传递给 value 的对象或函数，避免不必要的重新渲染。
使用 useMemo 或 useCallback：在 Provider 中使用这些钩子来缓存传递给 value 的对象或函数，避免不必要的重新渲染。
使用 React.memo：对于函数组件，可以使用 React.memo 来避免不必要的重新渲染。
使用 React.memo：对于函数组件，可以使用 React.memo 来避免不必要的重新渲染。