在自定义Hook中组合多个有状态React Hook派生数据是否为最佳实践？

我目前正在使用React Query和Zustand开发一款React Native应用，功能如下：

• 包含带地图的视图，地图上方的底部弹窗展示物品列表
• 可通过React Navigation打开多屏表单添加物品
• 用Zustand持久化表单状态，物品列表通过React Query获取
• 地图显示的位置优先级：用户添加新物品时选择的位置 > 列表首个物品的位置

现在我用自定义Hook派生地图相机位置，代码如下：

export const useMap = () => {
  const formLocation = useFormStore((state) => state.location);
  const { data } = useList();

  const currentCamera = {
    center: {
      latitude: 0,
      longitude: 0,
    },
    pitch: 0,
    heading: 0,
    altitude: 100000000,
    zoom: 0,
  };

  if (formLocation) {
    currentCamera.center = formLocation;
    currentCamera.altitude = 1000;
  }

  if (data && data.length > 0) {
    currentCamera.center = data[0].location;
    currentCamera.altitude = 1000;
  }

  return { currentCamera };
};

因为我平时主要用Angular，不太熟悉React的Hook组合方式，想知道这种写法是不是最佳实践？另外感觉状态比较分散，而且这些Hook只在单个页面使用，能不能把所有相关内容整合到一个Hook里？

当前Hook写法的合理性与优化点 #

你的useMap Hook写法符合React的最佳实践——单一职责+组合复用，这正是自定义Hook的核心价值：把关联逻辑抽离成独立单元，让组件代码更简洁。

不过代码里存在一个逻辑优先级错误：按照需求，formLocation（用户新增物品选择的位置）应该优先于列表首个物品位置，但当前代码中data的判断在formLocation之后，会覆盖掉表单位置的设置，导致不符合预期。修正方法是调换判断顺序，让表单位置的优先级更高：

// 修正后的逻辑
const currentCamera = {
  center: { latitude: 0, longitude: 0 },
  pitch: 0,
  heading: 0,
  altitude: 100000000,
  zoom: 0,
};

// 先处理列表数据
if (data && data.length > 0) {
  currentCamera.center = data[0].location;
  currentCamera.altitude = 1000;
}

// 表单位置优先级更高，存在则覆盖
if (formLocation) {
  currentCamera.center = formLocation;
  currentCamera.altitude = 1000;
}

整合单个Hook的可行性与实现思路 #

完全可以整合，对于仅在单个页面使用的逻辑，整合后能让页面组件更聚焦，减少零散的Hook调用。可以把useList（React Query获取列表）、useFormStore（Zustand表单状态）和地图相机位置的派生逻辑，封装到一个顶层Hook中，比如命名为useMapScreen：

export const useMapScreen = () => {
  // 获取表单位置状态
  const formLocation = useFormStore((state) => state.location);
  // 获取物品列表数据
  const { data: itemList, isLoading } = useList();
  // 用useMemo缓存相机位置，避免不必要的重渲染
  const currentCamera = useMemo(() => {
    const initialCamera = {
      center: { latitude: 0, longitude: 0 },
      pitch: 0,
      heading: 0,
      altitude: 100000000,
      zoom: 0,
    };

    if (itemList && itemList.length > 0) {
      initialCamera.center = itemList[0].location;
      initialCamera.altitude = 1000;
    }

    if (formLocation) {
      initialCamera.center = formLocation;
      initialCamera.altitude = 1000;
    }

    return initialCamera;
  }, [formLocation, itemList]);

  // 可按需加入表单操作方法，进一步整合页面所需逻辑
  const { setLocation } = useFormStore((state) => ({ setLocation: state.setLocation }));

  return {
    currentCamera,
    itemList,
    isLoading,
    setLocation,
  };
};

之后在地图页面组件中，只需调用const { currentCamera, itemList, isLoading, setLocation } = useMapScreen()，就能拿到所有需要的数据和方法，状态更集中，组件代码更简洁。

额外优化建议 #

• 用useMemo缓存currentCamera，避免每次渲染都创建新对象，提升性能
• 如果后续页面有其他关联逻辑（比如列表操作、表单提交），都可以逐步整合到这个Hook中

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