优雅地使用 React Context

周尛先森
313 阅读8分钟

在React的世界里，数据往往是通过属性（props）从父组件向下传递给子组件的。但这种做法有时会让我们遇到“属性钻取”的问题——也就是说，为了满足需求，我们不得不逐层穿越众多组件来传递属性。

为了解决这个问题，React的Context API横空出世，它允许我们在组件间共享数据，而不必逐级手动传递属性。因此，Context API可以被看作是React组件树中的一种“全局”数据解决方案。

什么是React Context API，我们应该在什么情况下使用它呢？

React的Context API是一个内置特性，它允许我们在不同组件间共享诸如主题、用户信息或配置设置等数据，而无需在组件树的每个层级显式地通过属性进行传递。这使得Context API特别适合用来管理那些需要在多个组件之间共享的全局状态，或者是那些分散在不同层级的组件所需的状态。

由于Context API是React库内置的一部分，我们无需将其作为第三方包来安装，即可在React应用中直接使用。

总的来说，Context API能够在React应用的各个组件间共享全局变量，而不必沿着组件树一层层地传递这些变量。对于那些多层嵌套的组件，如果它们需要访问来自上层组件的数据，Context API就显得特别有用了。

接下来，就让我们通过一个常见的用例示例，来深入了解一下Context API是如何工作的吧......

juejin.gif

React Context API示例——浅色和深色模式UI主题

在React应用中，用户界面的主题选择——比如“浅色模式”和“深色模式”——是一个常见的需求。React Context API在这里大显身手，它允许我们存储并共享当前用户的首选主题。

想象一下，在React应用中，从按钮到标题，从导航栏到页脚，再到下拉菜单，几乎所有的UI组件都需要根据当前的主题来调整自己的样式。如果使用传统的属性传递方式，我们就需要在组件树中逐层传递这个主题变量，这不仅繁琐，而且难以维护。

传递属性的传统解决方案

在React的传统做法中，我们可能会在顶层的App组件中定义一个主题变量，然后一层层地将其作为属性传递给子组件。这种方法虽然直接，却会引发“属性钻取”的问题。

什么是“属性钻取”？

在React中，“属性钻取”是指将数据从父组件经过多个中间组件传递到深层嵌套的子组件的过程。这种情况通常发生在需要将状态或函数传递至组件树较深层次的场合。

这种传递方式的问题在于，即使是那些并不直接使用这些属性的中间组件，在属性更新时也不得不随之重新渲染，这不仅增加了工作量，还可能导致性能问题，尤其是在组件层次复杂、数量众多的大型应用中更是如此。

在下一部分中，我们将探讨如何使用React Context API来优雅地解决这一问题，实现主题的全局管理和动态切换，而无需依赖层层传递属性的方式。

属性钻取示例：

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

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

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

function Button({ theme }) {
  return <button style={{ background: theme === 'dark' ? 'black' : 'white' }}>Click me</button>;
}

正如你所看到的，每个中间组件都需要接收这个属性，哪怕它并不真正使用这个属性，而只是为了将属性传递给更深层的子组件。这种做法不仅让代码变得杂乱无章，增加了理解和维护的难度，而且当属性发生变更时，那些实际上并不需要这个属性的中间组件也会被迫重新渲染，这无疑会带来性能上的损失。在组件层次繁多的大型应用中，这种情况尤其令人头疼。

Context API

在React应用中，我们经常会遇到需要将数据传递给深层次组件的情况，这时传统的属性传递方法（即props drilling）会使得代码变得复杂且难以维护。每个中间组件都需要显式地传递这些props，哪怕它们并不直接使用这些数据，这不仅增加了代码量，还可能导致性能问题，因为每次props更新时，所有相关组件都会重新渲染。

为了解决这个问题，React提供了一个强大的工具——Context API。Context API允许我们在组件树中创建一个全局的上下文环境，使得任何深度的组件都能够访问到这些共享的数据，而无需逐层传递props。

如何使用Context API

使用Context API主要分为三个步骤：创建上下文、提供上下文和消费上下文。

  1. 创建上下文

    首先，我们使用createContext函数创建一个新的Context对象，并可以为其指定一个默认值。

    import { createContext } from "react";

const themes = {
    light: {
        background: "white",
        text: "black",
    },
    dark: {
        background: "black",
        text: "white",
    },
};

const ThemeContext = createContext(themes.light);

  2. 提供上下文

    接下来，我们使用Provider组件将Context提供给组件树的一部分或全部。在Provider的value属性中，我们可以定义要共享的数据。

    import React, { useState } from "react";
import { ThemeContext } from "./ThemeContext";
import Navbar from "./Navbar";
import Button from "./Button";

const App = () => {
    const [theme, setTheme] = useState(themes.light);
    const toggleTheme = () => {
        setTheme(state => (state === themes.light ? themes.dark : themes.light));
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            <Navbar />
            <Button />
        </ThemeContext.Provider>
    );
};

export default App;

  3. 消费上下文

    最后，在需要使用这些共享数据的组件中，我们可以通过useContext钩子简单地获取到它们。

    import React, { useContext } from "react";
import { ThemeContext } from "../contexts/ThemeContext";

const Button = () => {
    const { theme, toggleTheme } = useContext(ThemeContext);

    return (
        <button
            style={{ backgroundColor: theme.background, color: theme.text }}
            onClick={toggleTheme}
        >
            Toggle Theme
        </button>
    );
};

export default Button;

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

    return (
        <nav style={{ backgroundColor: theme.background }}>
            <ul>
                <li style={{ color: theme.text }}>Home</li>
                <li style={{ color: theme.text }}>About</li>
            </ul>
        </nav>
    );
};

export default Navbar;

通过这种方式，我们可以轻松地在应用中的任何地方访问和更新共享数据，而无需担心属性钻取带来的问题。这样，我们就能够让代码保持清晰和高效，同时也提升了应用的性能和用户体验。

如何创建多个React Context

在之前的示例中，我们只创建了一个上下文——ThemeContext。但如果我们有其他需要全局共享的数据，比如当前登录用户的用户名和年龄，该怎么办呢？

我们可以创建一个大的上下文来存储所有需要全局访问的变量：

<OneBigContext.Provider value={{ theme, username, age }}>
  <Button changeTheme={toggleTheme} />
  <Navbar />
</OneBigContext.Provider>

然而，这种做法并不推荐，因为每当上下文的值更新时，所有消费该上下文的组件都会被重新渲染。这意味着那些只关心主题而不关心用户变量的组件也会在用户变量更新时被重新渲染，这会影响应用的性能，尤其是在大型应用中。

解决方案：创建多个上下文

我们可以通过创建多个上下文来解决这个问题——一个用于主题，另一个用于用户数据。这样，我们可以将应用程序包装在两个提供者中，如下所示：

<ThemeContext.Provider value={theme}>
  <UserContext.Provider value={{ username, age }}>
    <Button changeTheme={toggleTheme} />
    <Navbar />
  </UserContext.Provider>
</ThemeContext.Provider>

通过将相关数据存储在各自的上下文中，我们可以避免不必要的组件重新渲染，从而提高应用的性能。

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

正如我们所讨论的，每当上下文的值更新时，所有消费该上下文的组件都会被重新渲染——即使它们被包裹在React.memo()中也是如此。这可能会导致性能下降。

1. 使用多个React Context

这是我们之前提到的“首选”解决方案，能够有效地解决重新渲染的问题。

2. 分割组件并传递所需值

你可以将组件拆分，并将所需的值从上下文中传递（作为prop），同时将子组件包裹在React.memo()中。示例：

const Card = () => {
  const appContextValue = useContext(AppContext);
  const theme = appContextValue.theme;

  return (
    <div>
      <CardTitle theme={theme} />
      <CardDescription theme={theme} />
    </div>
  );
};

const CardTitle = React.memo(({ theme }) => {
  return <h2 style={{ color: theme.text }}>This is the Title</h2>;
});

const CardDescription = React.memo(({ theme }) => {
  return <p style={{ color: theme.text }}>lorem ipsum dolor sit amet,</p>;
});

React.memo()是一个高阶组件（HOC），用于优化函数组件，防止不必要的重新渲染。它通过记忆组件，只在props发生变化时重新渲染。

3. 在一个组件内部使用React.useMemo()

你还可以在组件内部使用useMemo()来优化渲染。如下所示：

const Card = () => {
  const appContextValue = useContext(AppContext);
  const theme = appContextValue.theme;

  return useMemo(
    () => (
      <div>
        <CardTitle theme={theme} />
        <CardDescription theme={theme} />
      </div>
    ),
    [theme]
  );
};

const CardTitle = ({ theme }) => {
  return <h2 style={{ color: theme.text }}>This is the Title</h2>;
};

const CardDescription = ({ theme }) => {
  return <p style={{ color: theme.text }}>lorem ipsum dolor sit amet,</p>;
};

在这个例子中，useMemo()的第一个参数是一个回调函数，返回一个记忆化的值。第二个参数是一个依赖数组，只有在依赖数组中的值更新时，回调函数才会被调用，从而重新渲染组件。

React Context API与Redux的比较

在React社区中，Context API和Redux是两个常用的状态管理工具，但它们的使用场景、优缺点各不相同。

  • Context API是React的内置特性，主要用于在组件树中共享状态，适合中小型应用，使用简单，设置成本低。
  • Redux是一个状态管理库，适合大型和复杂的应用，提供更强的可预测性和调试能力，但需要额外安装和配置。

总结

通过使用React的Context API，我们可以有效地管理全局状态，避免属性钻取带来的复杂性。无论是主题切换、用户认证还是其他全局数据的管理，Context API都为我们提供了一种灵活且高效的解决方案。希望这篇文章能帮助你更好地理解和应用React Context API！

avatar
文章
阅读
粉丝