React Context 的订阅模式详解

React Context 简介

在 React 应用中，数据通常通过 props 由父组件向子组件传递。但对于一些共享数据，如当前认证用户、主题模式等，若要传递到深层嵌套的子组件，层层传递 props 会变得繁琐且不便于维护，这时候 React Context 就派上用场了。

React Context 提供了一种在组件树中共享数据的方式，无需在每个中间组件手动传递 props。它允许你创建一个“上下文”对象，任何组件都可以订阅这个上下文，从而获取或更新其中的数据。

React Context 的基本使用

创建 Context 首先，使用 createContext 函数来创建一个 Context 对象。这个函数接受一个默认值作为参数，该默认值会在消费组件在组件树中没有找到匹配的 Provider 时使用。

import React from 'react';
const MyContext = React.createContext('default value');

提供 Context（Provider） 通过 Provider 组件将 Context 传递给后代组件。Provider 接受一个 value 属性，这个属性的值会被传递给所有订阅该 Context 的组件。

import React from'react';
const MyContext = React.createContext('default value');

function ParentComponent() {
    const contextValue = 'actual value';
    return (
        <MyContext.Provider value={contextValue}>
            <ChildComponent />
        </MyContext.Provider>
    );
}

function ChildComponent() {
    return (
        <div>
            {/* 这里将消费 MyContext */}
        </div>
    );
}

消费 Context 有几种方式可以消费 Context，其中一种是使用 Context.Consumer 组件。

import React from'react';
const MyContext = React.createContext('default value');

function ParentComponent() {
    const contextValue = 'actual value';
    return (
        <MyContext.Provider value={contextValue}>
            <ChildComponent />
        </MyContext.Provider>
    );
}

function ChildComponent() {
    return (
        <MyContext.Consumer>
            {value => (
                <div>
                    Context value: {value}
                </div>
            )}
        </MyContext.Consumer>
    );
}

在上述代码中，MyContext.Consumer 是一个函数式组件，它接受一个函数作为子元素。这个函数会接收到 Provider 传递下来的 value，我们可以在函数体中使用这个值进行渲染。

React Context 的订阅模式本质

从本质上讲，React Context 的订阅模式基于发布 - 订阅设计模式。在这种模式中，Provider 充当发布者的角色，而消费 Context 的组件则是订阅者。

发布者（Provider） 当 Provider 的 value 属性发生变化时，它会通知所有订阅了该 Context 的组件。这一过程是 React 内部机制实现的，Provider 并不需要知道具体有哪些组件在订阅它。

import React, { useState } from'react';
const MyContext = React.createContext('default value');

function ParentComponent() {
    const [contextValue, setContextValue] = useState('initial value');

    const handleClick = () => {
        setContextValue('new value');
    };

    return (
        <div>
            <button onClick={handleClick}>Change Context Value</button>
            <MyContext.Provider value={contextValue}>
                <ChildComponent />
            </MyContext.Provider>
        </div>
    );
}

function ChildComponent() {
    return (
        <MyContext.Consumer>
            {value => (
                <div>
                    Context value: {value}
                </div>
            )}
        </MyContext.Consumer>
    );
}

在上述代码中，当点击按钮时，contextValue 发生变化，Provider 会将新的值传递给 ChildComponent，ChildComponent 会重新渲染以显示新的值。

订阅者（Consumer 组件） 订阅者组件通过 Context.Consumer 或者 useContext Hook（在函数式组件中）来表达对 Context 的订阅。当 Context 的值发生变化时，订阅者组件会收到通知并重新渲染。

import React, { useContext } from'react';
const MyContext = React.createContext('default value');

function ParentComponent() {
    const [contextValue, setContextValue] = useState('initial value');

    const handleClick = () => {
        setContextValue('new value');
    };

    return (
        <div>
            <button onClick={handleClick}>Change Context Value</button>
            <MyContext.Provider value={contextValue}>
                <ChildComponent />
            </MyContext.Provider>
        </div>
    );
}

function ChildComponent() {
    const value = useContext(MyContext);
    return (
        <div>
            Context value: {value}
        </div>
    );
}

这里 ChildComponent 使用 useContext Hook 订阅了 MyContext。当 MyContext 的值变化时，ChildComponent 会自动重新渲染。

订阅模式在多层嵌套组件中的应用

在实际项目中，组件树往往是多层嵌套的。React Context 的订阅模式在这种情况下能很好地发挥作用，避免了 props 层层传递的问题。

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

const ThemeContext = createContext('light');

function App() {
    const [theme, setTheme] = useState('light');

    const toggleTheme = () => {
        setTheme(theme === 'light'? 'dark' : 'light');
    };

    return (
        <div>
            <button onClick={toggleTheme}>Toggle Theme</button>
            <ThemeContext.Provider value={theme}>
                <ParentComponent />
            </ThemeContext.Provider>
        </div>
    );
}

function ParentComponent() {
    return (
        <div>
            <ChildComponent />
        </div>
    );
}

function ChildComponent() {
    return (
        <GrandChildComponent />
    );
}

function GrandChildComponent() {
    const theme = useContext(ThemeContext);
    return (
        <div>
            Current theme: {theme}
        </div>
    );
}

在这个例子中，App 组件通过 ThemeContext.Provider 提供主题信息。GrandChildComponent 虽然嵌套较深，但可以直接通过 useContext 订阅 ThemeContext，获取当前主题，而无需通过 ParentComponent 和 ChildComponent 传递 props。

使用 React Context 订阅模式的注意事项

性能问题 由于 Context 的变化会导致所有订阅组件重新渲染，所以如果 Context 的值频繁变化，可能会影响性能。可以通过使用 React.memo 或者 shouldComponentUpdate（在类组件中）来优化。

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

const DataContext = createContext();

function App() {
    const [data, setData] = useState({ key: 'value' });

    const updateData = () => {
        setData({ key: 'new value' });
    };

    return (
        <div>
            <button onClick={updateData}>Update Data</button>
            <DataContext.Provider value={data}>
                <ChildComponent />
            </DataContext.Provider>
        </div>
    );
}

const ChildComponent = React.memo(() => {
    const contextData = useContext(DataContext);
    return (
        <div>
            Context data: {contextData.key}
        </div>
    );
});

在上述代码中，ChildComponent 使用 React.memo 进行包裹，只有当 DataContext 的值发生引用变化时才会重新渲染，避免了不必要的渲染。

避免滥用 虽然 Context 很方便，但过度使用可能会使组件之间的依赖关系变得不清晰，增加维护难度。尽量只在确实需要共享数据且传递 props 过于繁琐的情况下使用 Context。
Context 和 Redux 的区别 Redux 是一个状态管理库，它通过集中式的 store 来管理应用的状态。而 React Context 主要用于共享数据，它没有像 Redux 那样的严格的状态更新规则和中间件机制。一般来说，如果应用需要复杂的状态管理和业务逻辑，Redux 可能更合适；如果只是简单的数据共享，Context 就足够了。

总结 React Context 订阅模式

React Context 的订阅模式为 React 应用提供了一种高效共享数据的方式，它基于发布 - 订阅模式，使得组件之间可以轻松地共享数据而无需繁琐的 props 传递。通过合理使用 Context，我们可以优化组件结构，提高应用的可维护性。但同时，也要注意性能问题和避免滥用，以确保应用的高效运行。无论是简单的数据共享还是复杂的多层嵌套组件的数据传递，React Context 的订阅模式都能提供有效的解决方案。在实际项目中，根据具体需求和场景，灵活运用 Context 与其他状态管理工具（如 Redux），可以打造出更加健壮和高效的 React 应用。