理解 React 中的 API 封装、自定义 Hooks、组件、独立模块与 Context

在现代前端开发中，React 提供了多种方法来组织和管理代码。这些方法包括 API 封装、自定义 Hooks、组件、独立模块和 Context。理解它们的区别和联系，可以帮助我们编写更清晰、更模块化的代码。

1. API 封装

目的：处理与后端服务的通信逻辑，包括网络请求、错误处理、数据格式化等。

用法：将所有与 API 交互相关的代码封装在独立的模块中，以便在需要的时候调用。

示例：

// apiService.js
const BASE_URL = 'https://api.example.com';export async function fetchData() {const response = await fetch(`${BASE_URL}/data`);if (!response.ok) {throw new Error('Network response was not ok');}return response.json();
}

优点：

使组件代码更简洁，专注于 UI 渲染。
提高代码的可维护性和复用性。

2. 自定义 Hooks

目的：提取和复用状态逻辑和副作用逻辑，特别适用于多个组件之间共享逻辑。

用法：当多个组件需要相同的状态管理或副作用逻辑时，将这些逻辑封装成自定义 Hooks。

示例：

// useFetchData.js
import { useState, useEffect } from 'react';
import { fetchData } from './apiService';function useFetchData() {const [data, setData] = useState([]);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {async function load() {try {const result = await fetchData();setData(result);} catch (err) {setError(err);} finally {setLoading(false);}}load();}, []);return { data, loading, error };
}export default useFetchData;

优点：

复用状态逻辑和副作用逻辑。
提高代码的清晰度和复用性。

3. 组件

目的：描述和复用 UI 结构，通常包含状态和逻辑，负责渲染视图。

用法：创建独立的 UI 单元，封装特定的功能和样式。

示例：

// Dropdown.js
import React from 'react';function Dropdown({ items, onSelect }) {return (<select onChange={(e) => onSelect(e.target.value)}>{items.map(item => (<option key={item} value={item}>{item}</option>))}</select>);
}export default Dropdown;

优点：

封装 UI 逻辑，创建可复用的视图片段。
使代码模块化，易于维护和测试。

4. 独立模块

目的：封装不涉及组件状态的业务逻辑，如 API 调用、数据处理等。

用法：将业务逻辑与 UI 逻辑分离，提高代码的可维护性和复用性。

示例：

// userService.js
export async function fetchUsers() {const response = await fetch('/api/users');if (!response.ok) {throw new Error('Failed to fetch users');}return response.json();
}export async function createUser(data) {const response = await fetch('/api/users', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(data),});if (!response.ok) {throw new Error('Failed to create user');}return response.json();
}

优点：

逻辑清晰，易于复用。
提高代码的可维护性和可测试性。

5. Context

目的：在组件树中共享全局状态和业务逻辑，避免通过层层传递 props。

用法：当需要在多个组件之间共享状态和逻辑时，使用 Context 提供一个全局的共享对象。

示例：

// AuthContext.js
import React, { createContext, useContext, useState } from 'react';
import { login, logout, getCurrentUser } from './authService';const AuthContext = createContext();export const AuthProvider = ({ children }) => {const [user, setUser] = useState(getCurrentUser());const handleLogin = async (username, password) => {const loggedInUser = await login(username, password);setUser(loggedInUser);};const handleLogout = () => {logout();setUser(null);};return (<AuthContext.Provider value={{ user, login: handleLogin, logout: handleLogout }}>{children}</AuthContext.Provider>);
};export const useAuth = () => {return useContext(AuthContext);
};