React进阶：useEffect正确数据获取与可扩展项目构建指南

1. useEffect 正确数据获取：避免重渲染与Bug #

useEffect的核心是根据依赖数组决定执行时机，多数bug源于依赖数组不准确或未处理异步请求的状态更新。

实战示例：安全的API请求 #

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 用AbortController取消未完成请求，比isMounted更标准
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchUsers = async () => {
      try {
        setLoading(true);
        const res = await fetch('https://api.example.com/users', { signal });
        if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        // 忽略主动取消请求的错误
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();

    // 组件卸载或依赖变化时取消请求
    return () => controller.abort();
  }, []); // 空依赖：仅组件挂载时执行一次

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求失败：{error}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

最佳实践 #

• 依赖数组必须准确：如果useEffect用到组件内的状态/变量，务必放进依赖数组（用ESLint的react-hooks/exhaustive-deps规则强制检查），避免捕获过时状态
• 用AbortController处理异步请求：防止组件卸载后更新状态导致内存泄漏
• 拆分复杂逻辑：把异步请求、计算逻辑抽成单独函数，保持钩子简洁

2. 状态管理：从局部到全局的渐进方案 #

不用一开始就引入Redux，根据项目规模选择合适方案：

局部复杂状态：useReducer #

当状态逻辑涉及多步操作（加载、成功、失败），用useReducer比多个useState更清晰：

import { useReducer, useEffect } from 'react';

// 定义状态更新逻辑
function userReducer(state, action) {
  switch (action.type) {
    case 'LOADING':
      return { ...state, loading: true, error: null };
    case 'SUCCESS':
      return { ...state, loading: false, users: action.payload };
    case 'ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      throw new Error(`未知操作：${action.type}`);
  }
}

function UserList() {
  const initialState = { users: [], loading: true, error: null };
  const [state, dispatch] = useReducer(userReducer, initialState);

  useEffect(() => {
    const controller = new AbortController();

    const fetchUsers = async () => {
      dispatch({ type: 'LOADING' });
      try {
        const res = await fetch('https://api.example.com/users', { signal: controller.signal });
        if (!res.ok) throw new Error('请求失败');
        const data = await res.json();
        dispatch({ type: 'SUCCESS', payload: data });
      } catch (err) {
        if (err.name !== 'AbortError') {
          dispatch({ type: 'ERROR', payload: err.message });
        }
      }
    };

    fetchUsers();
    return () => controller.abort();
  }, []);

  // 渲染逻辑与之前一致
}

跨组件共享状态：Context + useReducer #

如果多个组件需要共享状态（比如用户登录信息），用Context API避免Prop Drilling：

// src/contexts/UserContext.jsx
import { createContext, useReducer, useContext } from 'react';

const UserContext = createContext();

function userReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, user: action.payload, isLoggedIn: true };
    case 'LOGOUT':
      return { ...state, user: null, isLoggedIn: false };
    default:
      return state;
  }
}

export function UserProvider({ children }) {
  const initialState = { user: null, isLoggedIn: false };
  const [state, dispatch] = useReducer(userReducer, initialState);

  return (
    <UserContext.Provider value={{ state, dispatch }}>
      {children}
    </UserContext.Provider>
  );
}

// 自定义Hook简化上下文调用
export function useUser() {
  return useContext(UserContext);
}

在main.jsx中包裹应用：

import { UserProvider } from './contexts/UserContext';
import App from './App';

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

组件中直接使用：

import { useUser } from '../contexts/UserContext';

function Header() {
  const { state, dispatch } = useUser();

  return (
    <header>
      {state.isLoggedIn ? (
        <button onClick={() => dispatch({ type: 'LOGOUT' })}>退出登录</button>
      ) : (
        <button onClick={() => dispatch({ type: 'LOGIN', payload: { name: '张三' } })}>登录</button>
      )}
    </header>
  );
}

3. 异步数据处理：抽离与复用 #

把API请求逻辑从组件中抽离，提升可维护性和复用性：

抽离API服务层 #

创建src/services/api.js：

export async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error(`请求失败：${res.status}`);
  return res.json();
}

export async function fetchUserById(id) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  if (!res.ok) throw new Error(`请求用户失败：${res.status}`);
  return res.json();
}

自定义Hook复用请求逻辑 #

创建src/hooks/useFetch.js：

import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    const loadData = async () => {
      try {
        setLoading(true);
        const res = await fetch(url, { signal: controller.signal });
        if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
        const result = await res.json();
        setData(result);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    if (url) loadData();

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

组件中直接调用：

import { useFetch } from '../hooks/useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://api.example.com/users');

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

4. 可扩展项目结构：小型React项目的专业布局 #

按功能+通用划分目录，避免混乱：

src/
├── components/          # 通用可复用组件（与业务无关）
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.css
│   ├── Card/
│   │   ├── Card.jsx
│   │   └── Card.css
│   └── Layout/
│       ├── Layout.jsx
│       └── Layout.css
├── features/            # 按业务功能划分（核心代码）
│   ├── User/
│   │   ├── UserList.jsx
│   │   ├── UserDetail.jsx
│   │   ├── userReducer.js
│   │   └── User.css
│   └── Post/
│       ├── PostList.jsx
│       ├── PostForm.jsx
│       └── Post.css
├── services/            # API服务、工具函数
│   ├── api.js
│   └── utils.js
├── contexts/            # 全局状态上下文
│   └── UserContext.jsx
├── hooks/               # 自定义Hook
│   ├── useFetch.js
│   └── useLocalStorage.js
├── styles/              # 全局样式、主题
│   ├── global.css
│   └── theme.css
├── App.jsx
└── main.jsx

目录说明 #

• components：存放通用组件，如Button、Card，可在多个功能模块复用，不绑定具体业务
• features：按业务功能聚合代码，每个功能下包含组件、状态逻辑、样式，高内聚易维护
• services：抽离API请求和工具函数，避免组件混杂业务逻辑
• contexts：存放全局共享状态的Context，如用户登录状态、主题设置
• hooks：自定义Hook，复用跨组件逻辑（如数据请求、本地存储操作）

内容的提问来源于stack exchange，提问作者Po'latov Temur