揭开 React Context 的秘密：力量、陷阱和性能

React Context 是一个很棒的工具——就像一个神奇的管道，可以跨组件传递共享数据，而不会出现道具钻取的混乱。但这种便利带来了一个问题：未经检查的使用可能会导致性能瓶颈，从而削弱您的应用程序。

在这篇博客中，我们将探索如何掌握 React Context，同时避开常见的陷阱。最后，您将成为 Context 专业人士，拥有优化的高性能应用程序。

---

1.什么是 React Context 以及为什么你应该关心？

React Context 是将应用程序的组件编织在一起的无形线程。它可以实现数据共享，而无需在组件树的每一层传递 props。

这是一个简单的示例：

const ThemeContext = React.createContext('light'); // Default: light theme

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button>




<hr>

<h2>
  
  
  <strong>2. The Hidden Dangers of React Context</strong>
</h2>

<h3>
  
  
  <strong>Context Change = Full Re-render</strong>
</h3>

<p>Whenever a context value updates, all consumers re-render. Even if the specific value a consumer uses hasn’t changed, React doesn’t know, and it re-renders anyway.</p>

<p>For example, in a responsive app using AdaptivityContext:<br>
</p>

<pre class="brush:php;toolbar:false">const AdaptivityContext = React.createContext({ width: 0, isMobile: false });

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <AdaptivityContext.Provider value={{ width, isMobile }}>
      <Header />
      <Footer />
    </AdaptivityContext.Provider>
  );
}

在这里，AdaptivityContext 的每个使用者都会在任何宽度变化时重新渲染 - 即使他们只关心 isMobile。

---

3.通过最佳实践增强环境

规则 1：缩小上下文

将上下文分解为逻辑单元，以防止不必要的重新渲染。

const SizeContext = React.createContext(0);
const MobileContext = React.createContext(false);

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <SizeContext.Provider value={width}>
      <MobileContext.Provider value={isMobile}>
        <Header />
        <Footer />
      </MobileContext.Provider>
    </SizeContext.Provider>
  );
}

规则 2：稳定上下文值

使用 useMemo 避免在每次渲染时为上下文值创建新对象。

const memoizedValue = React.useMemo(() => ({ isMobile }), [isMobile]);

<MobileContext.Provider value={memoizedValue}>
  <Header />
</MobileContext.Provider>;

规则 3：使用较小的上下文消费者

将上下文相关的代码移动到更小的、独立的组件中以限制重新渲染。

function ModalClose() {
  const isMobile = React.useContext(MobileContext);
  return !isMobile ? <button>Close</button> : null;
}

function Modal() {
  return (
    <div>
      <h1>Modal Content</h1>
      <ModalClose />
    </div>
  );
}

---

4.当背景不够时：了解你的极限

上下文适合全局、轻量级数据，例如主题、区域设置或用户身份验证。对于复杂的状态管理，请考虑 Redux、Zustand 或 Jotai 等库。

---

5.备忘单：React 上下文概览

Concept	Description	Example
Create Context	Creates a context with a default value.	const ThemeContext = React.createContext('light');
Provider	Makes context available to child components.	...
useContext Hook	Accesses the current context value.	const theme = React.useContext(ThemeContext);
Split Contexts	Separate context values with different update patterns.	const SizeContext = React.createContext(); const MobileContext = React.createContext();
Stabilize Values	Use useMemo to stabilize context objects.	const memoValue = useMemo(() => ({ key }), [key]);
Avoid Full Re-renders	Isolate context usage in smaller components or use libraries like use-context-selector.	{({ isMobile }) => ...}
When Not to Use Context	Avoid for complex state; use dedicated state management libraries.	Use Redux or Zustand for large-scale state management.

概念

---

描述

示例 标题> 创建上下文

创建具有默认值的上下文。 const ThemeContext = React.createContext('light'); 提供商

---

使上下文可供子组件使用。 ...

useContext 钩子

访问当前上下文值。 const 主题 = React.useContext(ThemeContext); 分割上下文 具有不同更新模式的单独上下文值。 const SizeContext = React.createContext(); const MobileContext = React.createContext();

稳定价值观

使用 useMemo 来稳定上下文对象。 const memoValue = useMemo(() => ({ key }), [key]); 避免完全重新渲染

隔离较小组件中的上下文使用或使用 use-context-selector 等库。 {({ isMobile }) =>; ...} 何时不使用上下文

避免复杂状态；使用专用的状态管理库。 使用 Redux 或 Zustand 进行大规模状态管理。 表>

6. React Context 的未来

---

React 团队正在积极开发上下文选择器，该功能允许组件仅订阅特定的上下文值。在那之前，use-context-selector 和 React-tracked 等工具都是很好的选择。 7.要点 React Context 很强大，但不是灵丹妙药。 上下文管理不善可能会导致性能显着下降。 通过遵循拆分上下文、稳定价值和优化消费者等最佳实践，您可以释放其全部潜力。 立即开始实施这些技术，将您的 React 应用程序提升到一个新的水平！ ？

以上是揭开 React Context 的秘密：力量、陷阱和性能的详细内容。更多信息请关注PHP中文网其他相关文章！