在另一个钩子中使用多个有状态反应钩子来导出数据是一个好习惯吗？

Question

我目前正在使用 React query 和 zustand 开发一个 React Native 应用程序。简化版本是带有地图的视图。地图顶部是一个底部工作表，它显示项目列表或使用反应导航添加项目的多个屏幕。我使用 zustand 将表单中每个值的状态保存到存储中。我的项目列表是使用反应查询获取的。地图显示的位置要么来自列表中的第一个项目，要么来自用户在添加新项目时选择的位置。

我目前正在使用如下所示的自定义挂钩导出地图的相机位置。

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，我想知道编写这样的钩子是否是一个很好的做法。

我觉得国家很分散。由于这些挂钩仅用于一个屏幕，因此我渴望将所有内容都集中到一个挂钩中。

Answer 1

我想建议不同的方法。

钩子很好，但它使你的代码依赖于反应。它会使解决性能问题变得困难。导致你写很多useMemo、useCallback...

您正在做的是计算派生状态，但也使用钩子中的变量（这让我不确定这个建议）

在

useFormStore

中，为

location

创建一个 setter 函数。我们就叫它吧

setLocation

在

setLocation

中，调用

calculateCurrentCamera

，这只是一个普通的js函数。

唯一的问题是，您需要传递

data

来存储您设置的函数

location

function calculateCurrentCamera(formLocation, data){
  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;
  }
}

您可以从此线程检查存储、计算 zustand 的派生状态：https://github.com/pmndrs/zustand/issues/132