React Query+Rick and Morty API项目：逻辑拆分与架构优化咨询

当然可以将子组件相关的状态、函数、变量移至单独文件，这不仅可行，更是React模块化开发的最佳实践——能让代码职责更清晰、复用性更强、维护成本更低，尤其适合中大型项目。

一、拆分的核心原则 #

拆分的关键是遵循单一职责原则：

• 子组件内部的私有状态（比如搜索框的输入值、分页组件的hover状态）：完全放到子组件自身文件中，让子组件自主管理。
• 跨组件复用的逻辑（比如分页计算、搜索防抖、API查询）：抽离为自定义Hook，放在单独的hooks目录中。
• 与父组件共享的数据/操作（比如搜索关键词、当前页码）：通过props在父子组件间传递，或用Context管理（仅当多层级组件共享时使用）。

二、具体拆分示例 #

1. 子组件私有状态拆分（以搜索组件为例） #

src/components/Home/SearchBar/SearchBar.jsx

import { useState } from 'react';

export default function SearchBar({ onSearch }) {
  // 搜索框输入状态完全由子组件管理
  const [searchTerm, setSearchTerm] = useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    // 仅将最终需要的搜索词传递给父组件
    onSearch(value);
  };

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={handleInputChange}
      placeholder="搜索Rick&Morty角色..."
      className="search-bar"
    />
  );
}

2. 可复用逻辑抽离为自定义Hook（以React Query查询为例） #

src/hooks/useRickAndMortyCharacters.js

import { useQuery } from '@tanstack/react-query';
import { fetchCharacters } from '../utils/api';

// 封装所有与角色查询相关的React Query逻辑
export default function useRickAndMortyCharacters(searchTerm, currentPage) {
  return useQuery({
    queryKey: ['characters', searchTerm, currentPage], // 缓存键，自动根据参数更新
    queryFn: () => fetchCharacters(searchTerm, currentPage),
    staleTime: 5 * 60 * 1000, // 5分钟内数据视为新鲜，避免重复请求
    retry: 2, // 请求失败自动重试2次
  });
}

3. 父组件仅做协调工作 #

src/components/Home/Home.jsx

import { useState } from 'react';
import useRickAndMortyCharacters from '../../hooks/useRickAndMortyCharacters';
import CharacterCard from './CharacterCard/CharacterCard';
import SearchBar from './SearchBar/SearchBar';
import Pagination from './Pagination/Pagination';

export default function Home() {
  // 仅维护跨子组件共享的状态
  const [searchTerm, setSearchTerm] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  
  // 直接调用自定义Hook获取数据
  const { data, isLoading, error } = useRickAndMortyCharacters(searchTerm, currentPage);

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

  return (
    <div className="home-container">
      <SearchBar onSearch={setSearchTerm} />
      <div className="card-grid">
        {data.results.map(character => (
          <CharacterCard key={character.id} character={character} />
        ))}
      </div>
      <Pagination
        currentPage={currentPage}
        totalPages={data.info.pages}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

三、推荐的目录结构 #

针对你的项目，模块化的目录结构如下：

src/
├── components/
│   ├── Home/                  # Home相关组件的聚合目录
│   │   ├── Home.jsx           # 父协调组件
│   │   ├── CharacterCard/     # 卡片子组件独立目录
│   │   │   ├── CharacterCard.jsx
│   │   │   └── CharacterCard.css
│   │   ├── SearchBar/         # 搜索子组件独立目录
│   │   │   ├── SearchBar.jsx
│   │   │   └── SearchBar.css
│   │   └── Pagination/        # 分页子组件独立目录
│   │       ├── Pagination.jsx
│   │       └── Pagination.css
│   └── Layout.jsx             # 全局布局组件（可选）
├── hooks/                     # 自定义Hook目录
│   ├── useRickAndMortyCharacters.js
│   ├── usePagination.js       # 分页逻辑Hook（可选）
│   └── useSearchDebounce.js   # 搜索防抖Hook（可选）
├── utils/                     # 工具函数目录
│   └── api.js                 # API请求封装
├── App.jsx
└── main.jsx

四、注意事项 #

• 不要过度拆分：如果某个子组件逻辑极简单（比如仅展示数据的卡片），无需强行拆分状态，保持简洁即可。
• 共享状态的处理：如果多个非父子组件需要共享状态（比如全局主题、用户信息），再考虑使用Context或状态管理库（如Zustand），避免过早复杂化。

内容的提问来源于stack exchange，提问作者fabio carvalho