使用 React Context API 的最佳实践

本文作者为 360 奇舞团前端开发工程师

本文将详细介绍如何使用 React 的 Context API 优雅地实现多主题切换，解决 props 穿透问题，并避免不必要的重新渲染。通过具体的示例代码，展示如何在浅色和深色模式之间切换，并探讨在实际项目中管理多个 Context 的最佳实践。

目录

1. 什么是 React Context API，何时使用？

2. 在浅色和深色模式之间切换 UI 主题

• 使用属性传递方案

• Context API 解决方案

如何创建多个 React 上下文（以及为什么应该这样做）

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

• 使用多个 React Context

• 拆分组件并传递所需的值

• 使用 React.useMemo() 组件

什么是 React Context API，何时使用？

React Context API 是 React 库的一部分，它允许在组件之间共享全局数据，而无需通过每层组件传递 props。Context API 非常适合需要在多个嵌套组件中共享状态的场景，例如管理全局主题设置、用户身份验证状态或应用配置等。使用 Context API，可以避免繁琐的 props 传递，提高代码的可读性和维护性。

以下内容将通过具体示例展示如何在 React 应用中使用 Context API 实现多主题切换，并探讨其最佳实践。

浅色和深色模式 UI 主题

React Context 的一个常见应用是管理浅色和深色模式的 UI 主题。许多 UI 组件，如按钮、标题、导航栏等，都需要根据当前主题显示不同的样式。通过使用 Context，可以在整个应用中方便地共享和切换主题，而不需要在每个组件中手动传递 props。下面我们对比一下两种解决方案：使用Props传递的方案和Context API 解决方案

使用 Props 传递的方案

最直接的方法是通过顶层组件创建一个主题变量，然后将其作为 props 传递给组件树中的所有子组件。然而，这种方法会导致“props 穿透”问题，即每个中间组件都需要传递这个 props，即使它们并不实际使用该值。这不仅使代码变得冗长和难以维护，还可能导致中间组件在不必要的时候重新渲染，从而影响性能。

function App() {
  const theme = 'dark';
  return <Parent theme={theme} />;
}

function Parent({ theme }) {
  return <Child theme={theme} />;
}

function Child({ theme }) {
  return <Switch theme={theme} />;
}

function Switch({ theme }) {
  return <Switch style={
   { background: theme === 'dark' ? '#000' : '#fff' }}>切换主题</Switch>;
}

在上述代码中，theme 属性被一层层传递到最底层的 Switch 组件。虽然这种方式能实现功能，但显然并不优雅。每个中间组件都需要接受和传递 theme 属性，即使它们并不使用这个值。这不仅增加了代码的复杂度，还导致了潜在的性能问题。

Context API 解决方案

我们可以通过使用 Context API 来解决 props 穿透 问题。

创建 Context