Page Context 设计 | React.createContext 入门

前言

React 是一种流行的 JavaScript 库，用于构建用户界面。它提供了一种组件化的开发方式，使得前端开发变得更加简单和可维护。在 React 中，组件之间的数据传递是非常重要的，而 React 提供了多种方式来处理这种数据传递，其中包括 Context API。本文将重点介绍 React 中的 React.createContext 方法，这是使用 Context API 的第一步。

什么是 Context API？

在 React 应用程序中，有时候需要在组件之间共享某些数据，而不必通过一层层的传递 props。这时就可以使用 Context API。它提供了一种在组件树中传递数据的方法，而不必手动地通过 props 层层传递。这样可以使得组件之间的数据共享变得更加简单和便捷。

React.createContext 方法

React.createContext 是 Context API 的一部分，它用于创建一个 Context 对象。这个对象包含了两个组件：Provider 和 Consumer。

1. 创建一个 Context 对象

const MyContext = React.createContext(defaultValue);

React.createContext 接受一个参数 defaultValue，表示当组件在树中没有找到对应的 Provider 时，所采用的默认值。这个默认值在没有 Provider 包裹时会被用到。

2. Provider

Provider 组件用于向下传递当前的 Context 值。它接受一个 value 属性，这个属性的值可以是任何 JavaScript 对象。

<MyContext.Provider value={/* 某个值 */}>
  {/* 子组件 */}
</MyContext.Provider>

3. Consumer

Consumer 组件用于从上层 Context 中读取当前的值。它是一个函数组件，接受一个函数作为其子元素。这个函数接受当前的 Context 值作为参数，并返回一个 React 元素。

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染 */}
</MyContext.Consumer>

示例

下面是一个简单的示例，演示了如何使用 React.createContext 方法：

// 创建一个 Context 对象
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      // 提供一个 ThemeContext.Provider，并设置 value 为 dark
      <ThemeContext.Provider value="dark">
        {/* 渲染子组件 */}
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  // 使用 ThemeContext.Consumer 获取当前的 theme 值
  return (
    <ThemeContext.Consumer>
      {theme => (
        <div style={{ backgroundColor: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#333' }}>
          {/* 根据 theme 渲染不同的内容 */}
          {theme === 'dark' ? 'Dark Theme' : 'Light Theme'}
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在这个示例中，ThemeContext.Provider 提供了一个值为 ‘dark’ 的 theme，并将其向下传递给 Toolbar 组件。Toolbar 组件通过 ThemeContext.Consumer 获取当前的 theme 值，并根据其值渲染不同的内容。

Page Context 设计

在前端页面设计时，有几个时常需要复用的功能：

1. 消息通知
2. 后端请求
3. 国际化
4. 页面跳转

可以将这四个功能使用 React.createContext 将4个功能整合进一个Page Context 以减少代码重复。Page.ts代码如下，其中全局message使用的是antd组件，国际化使用的是react-intl

import React, { ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { message } from 'antd';
import { useIntl } from 'react-intl';
import { Requester } from '../Requester';

export interface PageProps {
  user: object;
}

const defaultValue: any = undefined;
export const PageContext = React.createContext(defaultValue);

export const Page: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const intl = useIntl();

  return (
    <PageContext.Provider value={{ messageApi, navigate, Requester, intl }}>
      {contextHolder}
      {children}
    </PageContext.Provider>
  );
};

总结

React.createContext 方法是使用 Context API 的第一步，它用于创建一个 Context 对象。通过 Provider 和 Consumer 组件，我们可以在 React 应用程序中实现组件之间的数据共享，而不必手动地通过 props 层层传递。这种方式使得代码更加简洁和可维护，是 React 开发中的一个重要技术点。