React Context API什么是 Context API React Context API 是一个用于在组件树

什么是 Context API

React Context API 是一个用于在组件树中提供和消费数据的机制，可以避免通过 props 层层传递数据。它非常适合用于全局状态管理，比如主题、用户信息、语言设置等。

如何创建 Context

创建一个 Context: 使用 createContext 方法创建一个 Context 对象。

import { createContext } from 'react';

const MyContext = createContext();

提供 Context: 使用 Provider 组件包裹需要访问此 Context 的组件，并通过 value 属性传递数据。

const MyProvider = ({ children }) => {
    const value = { /* 共享的数据 */ };

    return (
        <MyContext.Provider value={value}>
            {children}
        </MyContext.Provider>
    );
};

如何使用 Context

消费 Context: 在需要使用 Context 的组件中，使用 useContext Hook 来获取共享的值。

import { useContext } from 'react';

const MyComponent = () => {
    const contextValue = useContext(MyContext);
    
    return (
        <div>
            {/* 使用 contextValue */}
        </div>
    );
};

如何防止 React Context 重新渲染问题

使用 Context 时，如果提供的值发生变化，所有使用该 Context 的组件都会重新渲染。为了解决这个问题，可以：

避免直接传递对象或数组: 直接传递动态生成的对象或数组可能导致不必要的重新渲染。可以将对象放在状态中，确保其引用不变。
```
const [state, setState] = useState(initialState);
```
使用 memoization: 可以使用 useMemo 来防止不必要的重新渲染。
```
const value = useMemo(() => ({ /* 数据 */ }), [/* 依赖项 */]);
```

使用多个 React Context

在同一应用中，可以创建多个 Context，以便处理不同类型的状态。

const ThemeContext = createContext();
const AuthContext = createContext();

使用 Hooks 版本的 createContext 和 useContext

React 自 16.8 版本引入 Hooks，让使用 Context 更加方便。通过 useContext Hook，可以直接获取上下文值，而不需要使用 Context.Consumer 的组合结构。

示例：

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

const MyContext = createContext();

const MyProvider = ({ children }) => {
   const [state, setState] = useState({ /* 共享状态 */ });

   return (
       <MyContext.Provider value={state}>
           {children}
       </MyContext.Provider>
   );
};

const MyComponent = () => {
   const contextValue = useContext(MyContext);
   return <div>{contextValue}</div>;
};

通过以上方式，你可以创建和使用 Context 来管理 React 应用中的全局状态，同时保证性能的优化。

使用场景 - 切换主题场景

import { useState, createContext, useContext  } from 'react'
import { Switch } from "antd"
import './App.css'

const themes = {
  light: {
    background: "#fff",
    text: "#000",
    current: 'light'
  },
  dark: {
    background: "#000",
    text: "#fff",
  },
}

const ThemeContext = createContext(themes.light);

const Navbar = () => {
  const theme = useContext(ThemeContext)

  return (
    <div style={{ backgroundColor: theme.background }}>
      <ul style={{ display: "flex",gap: "20px" }}>
        <li style={{ color: theme.text }}>首页</li>
        <li style={{ color: theme.text }}>订单</li>
        <li style={{ color: theme.text}}>我的</li>
      </ul>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState(themes.light)

  const toggleTheme = () => {
    setTheme(state => (state === themes.light ? themes.dark : themes.light))
  }

  return (
    <div className="App">
    <ThemeContext.Provider value={theme}>
      <Switch onChange={toggleTheme} />
      <Navbar />
    </ThemeContext.Provider>
  </div>
  )
}

export default App

React Context API 的利弊

优势

简化数据传递:
- Context 允许数据在组件树中直接传递，而不必通过每一级组件的 props 传递，避免了繁琐的结构和手动管理 props。
全局状态管理:
- 非常适合用于管理全局状态（如主题、用户身份等），使得数据的共享变得简单和一致。
可读性更高:
- 使用 Context 可以使得组件更加清晰，避免了复杂的 props 传递，增强了代码的可读性。
便于测试:
- Context 内部的业务逻辑可以方便地进行单元测试，因为你可以通过 Provider 注入不同的值来测试不同的场景。

劣势

性能问题:
- 当 Context 中的数据发生变化时，所有使用该 Context 的组件都会重新渲染，这可能导致性能问题，特别是在-context-update 频繁的情况下。
过度使用:
- 如果在不需要共享状态的地方使用 Context，可能会导致代码复杂化和混乱，降低组件的可重用性。
调试困难:
- 在大规模应用中，追踪各个组件的 Context 依赖关系可能变得更加复杂，调试时需要更多的努力以理解数据流。
有限的响应性:
- 如果需要在深层次的组件中使用 Context，可能需要多个 Provider，这是管理状态的一个挑战。

总结

使用 Context API 的选择应该根据具体的场景进行评估。在需要共享状态或数据的情况下，它提供了很多便利，但在使用时也要考虑到性能和可维护性等问题。如果应用程序中有许多状态需要管理，并且这些状态不常变化，可以考虑结合使用 Redux 或其他状态管理库。