React应用状态管理与API数据获取最佳实践咨询

状态管理方案（解决Props逐层透传问题） #

你提到的几种方案没有绝对优劣，是按应用扩张阶段组合使用的，按落地成本从低到高排序如下：

• 「useState存储对象统一向下传递」仅适合状态关联度极高、组件嵌套层级不超过2层的场景，不建议大范围使用。对象类型状态哪怕只修改一个字段，所有消费该对象的子组件都会触发重渲染，性能损耗高；你当前顶层组件已经有10个左右独立状态，强行合并为对象反而会让更新逻辑更混乱。
• 「组件组合模式」是成本最低、优先级最高的优化手段，无需引入任何额外依赖。核心逻辑是不要把所有状态都堆在最顶层组件，将关联的状态和更新逻辑下沉到对应业务组件内部，通用容器组件通过插槽方式接收子元素，从根源上减少跨层级传参的需求。比如你当前Header下的搜索、团队筛选组件，完全可以把搜索关键词、选中团队这类仅在筛选模块使用的状态直接放在对应组件内部，不需要抬到顶层Feedback组件再逐层下传；只有多组件共享的状态（比如全局语言配置）才需要放在上层。
• 「React Context」适合跨多层组件共享、更新频率较低的全局状态，比如语言配置、用户信息、全局主题。使用时注意不要把所有状态塞进单个Context，要按更新频率拆分独立Context，比如单独拆分语言Context、筛选参数Context，避免单个状态更新导致所有消费Context的组件无意义重渲染。以你当前的应用规模，组件组合+Context完全可以覆盖绝大多数场景，不需要一开始就引入重型状态库。
• 「Redux（建议使用Redux Toolkit版本）」适合后续应用扩张到多页面、状态需要跨页面共享、存在复杂状态更新逻辑（比如多条件依赖更新、操作回溯、统一状态日志）的场景。你目前还在逐步替换服务端模板的阶段，单页面内的状态用Context足够，等后续多页面共享状态增多再迁移也很方便，过早引入只会增加不必要的复杂度。

声明式API同步逻辑优化（解决手动触发重拉取、初始重复请求问题） #

你当前写的refetch标记、手动拼接queryParams、监听状态触发请求的逻辑是命令式写法，完全没有用到SWR本身的声明式特性。SWR原生支持依赖变化自动触发请求，根本不需要手动维护重拉取标记。

核心优化思路 #

1. 直接把筛选、分页参数作为SWR key的一部分，不要单独维护queryParams字符串。SWR会自动监听key的变化，只要参数改变就自动发起新请求，完全不需要手动写useEffect监听触发重拉取。
2. 解决初始加载重复请求问题：首次加载时只请求基础接口路径，等首次接口返回拿到默认筛选参数完成初始化后，再把参数拼到SWR key中，配合SWR的条件请求、重验证配置，就不会触发多余请求。

核心代码改造示例 #

删除原有冗余的refetch、pageChange、queryParams状态和对应useEffect，核心逻辑修改如下：

import { useEffect, useMemo, useState } from "react";
import useSWR from "swr";

import { getActiveTeamID, getTimescaleValue } from "./lib/util";

import Header from "./components/header/Header";
import Body from "./components/feedback/Body";

// 初始默认配置
const DEFAULT_VALUES = {
  activeTeamID: 0,
  showChildren: true,
  timescale: "last-3",
  searchTerm: "",
  page: 1,
  lng: "is",
  title: "Feedback",
  teams: [],
  isDummy: false,
  translate: true
}

export default function Feedback() {
  // 纯本地UI状态，和接口参数无关的单独维护
  const [translate, setTranslate] = useState(DEFAULT_VALUES.translate);
  
  // 筛选、分页相关状态
  const [filters, setFilters] = useState({
    activeTeamID: DEFAULT_VALUES.activeTeamID,
    showChildren: DEFAULT_VALUES.showChildren,
    timescale: DEFAULT_VALUES.timescale,
    searchTerm: DEFAULT_VALUES.searchTerm,
    page: DEFAULT_VALUES.page,
    lng: DEFAULT_VALUES.lng,
    title: DEFAULT_VALUES.title,
    teams: DEFAULT_VALUES.teams,
    isDummy: DEFAULT_VALUES.isDummy
  });

  // 标记是否已完成首次参数初始化
  const [initialized, setInitialized] = useState(false);

  // 生成SWR请求key：初始化前请求基础路径，初始化后自动拼接参数，参数变化自动触发请求
  const requestKey = useMemo(() => {
    if (!initialized) return "/client/feedback";
    return `/client/feedback?team=${filters.activeTeamID}&children=${filters.showChildren}&view=${filters.timescale}&search=${filters.searchTerm}&page=${filters.page}`;
  }, [initialized, filters]);

  const { data, error, isLoading } = useSWR(requestKey, {
    // 未初始化时走默认挂载重验证，初始化后挂载不触发重复请求
    revalidateOnMount: !initialized
  });

  // 首次拿到接口数据后初始化默认筛选参数，仅执行一次
  useEffect(() => {
    if (data && !initialized) {
      setFilters(prev => ({
        ...prev,
        lng: data.client.lng,
        title: data.client.title,
        teams: data.filters.teams,
        isDummy: data.filters.dummy,
        activeTeamID: getActiveTeamID(data.filters.teams),
        showChildren: data.filters.children,
        timescale: getTimescaleValue(data.filters.timescale.selected),
      }));
      document.title = data.client.title;
      setInitialized(true);
    }
  }, [data, initialized]);

  if (error) return <div>{error}</div>;

  return (
    <>
      <Header
        title={filters.title}
        lng={filters.lng}
        filters={data?.filters}
        translate={translate}
        setTranslate={setTranslate}
        teams={filters.teams}
        activeTeamID={filters.activeTeamID}
        showChildren={filters.showChildren}
        timescale={filters.timescale}
        searchTerm={filters.searchTerm}
        setFilters={setFilters}
      />
      <Body
        feedback={data?.feedback}
        lng={filters.lng}
        translate={translate}
        page={filters.page}
        pagination={data?.pagination}
        isLoading={isLoading}
        searchTerm={filters.searchTerm}
        isDummy={filters.isDummy}
        setFilters={setFilters}
      />
    </>
  );
}

后续如果筛选逻辑进一步复杂，可以把filters状态和更新逻辑抽成独立的自定义Hook，在需要使用的组件中直接调用，连Context都不需要额外编写，维护成本更低。如果想进一步减少初始请求，可以让后端首次基础接口直接返回默认筛选参数对应的列表数据，配合SWR的fallbackData配置预填充，初始化阶段连第二次请求都不需要发起。

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