使用 TypeScript 优化 React Context：综合指南

it键盘侠2023-11-02 17:18

介绍：

React Context 是在 React 应用程序中管理全局状态的强大工具。它允许组件共享和访问数据，而无需进行复杂的prop drilling操作。无论您是希望刚开始使用 Context 的初学者，还是希望优化 Context 使用性能的中级开发人员，本文或许都能给您提供一些灵感。

在这篇内容全面的文章中，我们将探讨如何充分发挥 React Context 的潜力，并特别关注如何使用 TypeScript 增强开发体验。我们不仅会确保类型安全，还会通过使用 useMemo 和 useCallback 深入探讨性能优化技术。

什么是 React Context？

React Context是 React 中强大的内置机制，可简化组件之间的数据共享。它对于管理React 应用程序中的全局状态特别有用。使用React Context的主要优点是它能够减轻prop drilling（数据通过多个中间组件传递的过程）。Prop drilling既繁琐又容易出错，还会使代码库变得杂乱无章。

虽然 Redux 等其他状态管理解决方案可用，但React Context 提供了更轻量级和原生的替代方案，无需额外的设置和样板代码。它是一个多功能工具，可以显着增强React 应用程序的可扩展性和可维护性。在文中，我们将探索如何充分发挥React Context 的潜力，确保您的应用程序不仅高效，而且可维护且易于使用。

设置 React Context和 TypeScript：

在本节中，我们将简单描述一下您使用 TypeScript 创建基本 React 应用程序并建立主题管理Context的完成过程。

使用 Vite 创建一个新的 React 应用程序：

首先，我们将使用 Vite 创建一个新的 React 应用程序。Vite 是一款快速、轻量级的构建工具，只需最少的配置即可创建 React 应用程序。它是创建 React 应用程序的最佳替代工具，后者可能既慢又臃肿。

要使用 Vite 创建新的 React 应用程序，请在终端运行以下命令：

kotlin 复制代码 
npm init vite@latest

系统会提示你输入项目名称并选择框架。在本例中，我们将使用以下选项：

yaml 复制代码 
project name: react-context-typescript
framework: react

创建项目后，导航至项目目录并安装依赖项：

bash 复制代码 
cd react-context-typescript
npm install

最后，启动开发服务器：

arduino 复制代码 
npm run dev

您应该在终端中看到以下输出：

arduino 复制代码 
  vite v2.6.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1.03s.

您现在可以在浏览器中通过http://localhost:3000/查看您的应用程序。

在不使用 useMemo 的组件中使用 ThemeContext

现在我们已经建立了一个基本的 React 应用程序，可以为主题管理创建一个新的 React Context。为此，我们将在 src 目录中创建一个名为 ThemeContext.tsx 的新文件。该文件将包含Context提供者和消费者组件。

bash 复制代码 
touch src/ThemeContext.tsx

接下来，我们将定义Context数据和功能。在本例中，我们将创建一个主题Context，允许用户在浅色和深色主题之间切换。我们还将定义一个函数，允许用户切换主题。

typescript 复制代码 
// src/ThemeContext.tsx

import { createContext } from 'react';

type Theme = 'light' | 'dark';

type FontSize = 'small' | 'medium' | 'large';

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
  fontSize: FontSize;
  changeFontSize: (size: FontSize) => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

interface ThemeProviderProps {
  children: ReactNode;
}

export function ThemeProvider({ children }: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>('light');
  const [fontSize, setFontSize] = useState<FontSize>('medium');

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

  const changeFontSize = (size: FontSize) => {
    setFontSize(size);
  };

  return (
    <ThemeContext.Provider
      value={{ theme, toggleTheme, fontSize, changeFontSize }}
    >
      {children}
    </ThemeContext.Provider>
  );
}

在这个版本中，我们添加了一个 fontSize 状态和 setFontSize 函数来控制字体大小。每次主题或字体大小发生变化时，整个Context都将重新渲染。这看着似乎不是一个理想化的状态，尤其是在大型应用程序中有许多组件需要使用Context数据的情况下。

现在我们已经建立了基本的 React Context，可以在组件中使用它。为此，我们将在 src 目录中创建一个名为 App.tsx 的新文件。该文件将包含主应用程序组件。

bash 复制代码 
touch src/App.tsx

接下来，我们将从ThemeProvider中导入组件ThemeContext.tsx并将其包装在App组件周围。这将允许我们访问App组件及其子组件中的Context数据。

javascript 复制代码 
// src/App.tsx

import { ThemeProvider } from './ThemeContext';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>React Context with TypeScript</h1>
      </div>
    </ThemeProvider>
  );
}

export default App;

接下来，我们将在 src 目录中创建一个名为 Header.tsx 的新文件。该文件将包含标题组件。

css 复制代码 
touch src/Header.tsx

接下来，我们将从 ThemeContext.tsx 中导入 useTheme 钩子，并用它来访问 Header 组件中的Context数据。

javascript 复制代码 
// src/Header.tsx

import { useTheme } from './ThemeContext';

function Header() {
  const { theme, toggleTheme, fontSize, changeFontSize } = useTheme();

  return (
    <header>
      <h1>React Context with TypeScript</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={() => changeFontSize('small')}>Small</button>
      <button onClick={() => changeFontSize('medium')}>Medium</button>
      <button onClick={() => changeFontSize('large')}>Large</button>
    </header>
  );
}

export default Header;

最后，我们将把 Header 组件导入 App.tsx，并将其呈现在 h1 元素下方。

javascript 复制代码 
// src/App.tsx

import Header from './Header';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>React Context with TypeScript</h1>
        <Header />
      </div>
    </ThemeProvider>
  );
}

export default App;

在组件中使用 ThemeContext 而不使用 useMemo 和 useCallback 缺点

在初始设置中，主题和字体大小都没有进行备忘录化。因此，当主题或字体大小发生变化时，整个Context都将重新渲染。这可不是最佳选择，尤其是在拥有大量依赖Context数据的组件的大型应用程序中。

此外，在这个基本实现中，toggleTheme 和 changeFontSize 函数也没有进行 memo 化。因此，每当对主题或字体大小进行更改时，整个Context都要重新渲染，从而导致性能低下，尤其是在具有大量Context消费者的复杂应用程序中。

在接下来的段落中，我们将通过引入 useMemo 和 useCallback 来优化Context，最终提高应用程序的性能和响应速度，从而应对这些挑战。

通过 useMemo 在组件中使用 ThemeContext

现在我们已经建立了基本的 React Context，可以在组件中使用它了。为此，我们将在 src 目录中创建一个名为 App.tsx 的新文件。该文件将包含主应用程序组件。

bash 复制代码 
touch src/App.tsx

接下来，我们将重写 ThemeProvider 组件，使用 useMemo 来记忆Context数据和函数。这将避免在主题或字体大小发生变化时出现不必要的重新渲染。

ini 复制代码 
// src/ThemeContext.tsx

import {
  createContext,
  ReactNode,
  useContext,
  useMemo,
  useState,
  useCallback,
} from 'react';

type Theme = 'light' | 'dark';

type FontSize = 'small' | 'medium' | 'large';

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
  fontSize: FontSize;
  changeFontSize: (size: FontSize) => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

interface ThemeProviderProps {
  children: ReactNode;
}

export function ThemeProvider({ children }: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>('light');
  const [fontSize, setFontSize] = useState<FontSize>('medium');

  const toggleTheme = useCallback(() => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  }, []);

  const changeFontSize = useCallback((size: FontSize) => {
    setFontSize(size);
  }, []);

  const value = useMemo(
    () => ({ theme, toggleTheme, fontSize, changeFontSize }),
    [theme, toggleTheme, fontSize, changeFontSize]
  );

  return (
    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
  );
}

接下来，我们将从 ThemeContext.tsx 中导入 ThemeProvider 组件，并将其包裹在 App 组件周围。这将允许我们访问 App 组件及其子组件中的Context数据。

javascript 复制代码 
// src/App.tsx

import { ThemeProvider } from './ThemeContext';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>React Context with TypeScript</h1>
      </div>
    </ThemeProvider>
  );
}

export default App;

接下来，我们将在 src 目录中创建一个名为 Header.tsx 的新文件。该文件将包含标题组件。

css 复制代码 
touch src/Header.tsx

我们将从 ThemeContext.tsx 中导入 useTheme 钩子，并用它来访问 Header 组件中的Context数据。

javascript 复制代码 
// src/Header.tsx

import { useTheme } from './ThemeContext';

function Header() {
  const { theme, toggleTheme, fontSize, changeFontSize } = useTheme();

  return (
    <header>
      <h1>React Context with TypeScript</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={() => changeFontSize('small')}>Small</button>
      <button onClick={() => changeFontSize('medium')}>Medium</button>
      <button onClick={() => changeFontSize('large')}>Large</button>
    </header>
  );
}

export default Header;

最后，我们将把 Header 组件导入 App.tsx，并将其呈现在 h1 元素下方。

javascript 复制代码 
// src/App.tsx

import Header from './Header';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>React Context with TypeScript</h1>
        <Header />
      </div>
    </ThemeProvider>
  );
}

export default App;

总结

使用 TypeScript 增强类型安全：

我们首先强调类型安全在大规模应用中的重要性。通过巧妙地使用TypeScript ，我们确保您的代码保持健壮，并在编译时而不是运行时捕获潜在的错误。React 和TypeScript的这种强大组合让开发人员可以自信地工作，因为他们知道他们的代码既简洁又可靠。

使用 useMemo 和 useCallback 进行性能优化：

其实这篇文章的核心之处在于，我们深入研究了怎么进行性能的优化。通过引入useMemo 和useCallback 钩子，我们减轻了不必要的重新渲染和低效数据处理的常见问题。当我们优化React Context时，我们解决了不使用这些钩子的缺点，这种做法在许多React项目中经常被忽视。通过采用这些技术，开发人员获得了宝贵的工具集来创建响应灵敏的高性能应用程序。

相关推荐
GISer_Jing41 分钟前
React核心功能详解（一）
前端·react.js·前端框架
FØund4043 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
疯狂的沙粒4 小时前
如何在 React 项目中应用 TypeScript？应该注意那些点？结合实际项目示例及代码进行讲解！
react.js·typescript
鑫宝Code5 小时前
【React】React Router：深入理解前端路由的工作原理
前端·react.js·前端框架
沉默璇年14 小时前
react中useMemo的使用场景
前端·react.js·前端框架
红绿鲤鱼15 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
loey_ln17 小时前
FIber + webWorker
javascript·react.js
zhenryx18 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
老码沉思录1 天前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
沉默璇年1 天前
react中Fragment的使用场景
前端·react.js·前端框架
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示