React Context API 的三种不同使用姿势

2023-10-07 13:35:38

React 三式演绎 Context API

引言：
React 中的 Context API 是一项强有力的工具，它允许在组件树中共享数据，而无需手动传递 props。这对于管理全局状态或在不同层级组件之间共享信息非常有用。

姿势一：单文件版
这种姿势是最简单的，将 Context API 定义和消费都在同一个文件中进行。例如：

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

const ThemeContext = createContext();

const App = () => {
  const theme = 'light';
  return (
    <ThemeContext.Provider value={theme}>
      <Content />
    </ThemeContext.Provider>
  );
};

const Content = () => {
  const theme = useContext(ThemeContext);
  return <p style={{ color: theme }}>This is the content.</p>;
};

姿势二：多文件版
对于较大的应用程序，将 Context API 分割到多个文件中可能是有利的。index.js 文件将包含 Context 的定义，而其他文件将包含消费 Context 的组件。

index.js

import React from 'react';

export const ThemeContext = React.createContext();

context-theme.js

import React, { useState } from 'react';
import { ThemeContext } from './index';

const ThemeProvider = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

ThemedButton.js

import React, { useContext } from 'react';
import { ThemeContext } from './index';

const ThemedButton = () => {
  const { theme } = useContext(ThemeContext);
  return <button style={{ color: theme }}>Themed Button</button>;
};

export default ThemedButton;

ThemeLink.js

import React, { useContext } from 'react';
import { ThemeContext } from './index';

const ThemeLink = () => {
  const { theme } = useContext(ThemeContext);
  return <a style={{ color: theme }}>Themed Link</a>;
};

export default ThemeLink;

姿势三：多文件版升级
姿势二中 Context API 的定义是分散的，这在大型应用程序中可能难以维护。为了解决这个问题，我们可以将 Context 的定义放到一个单独的文件中。

index.js

import React from 'react';

export const ThemeContext = React.createContext();
export const useTheme = () => useContext(ThemeContext);

context

import React from 'react';
import { ThemeContext, useTheme } from './index';

const ThemeProvider = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;