1

我正在清理一个监听我的数据库的组件，当它有响应时，导航到一个特定的屏幕。

这是我的原始组件：

function MyComponent() {
   const { navigation } = useNavigation();

   const start = (data) => {
      navigation.navigate("Somewhere", { data });
   };

   const listenData = (doc) => {
      const { something } = doc.data();
      start(something);
   };

   useEffect(() => {
      const listener = listenDB((data) => {
        setData(data);
      };

      return () => listener();
   }, []);

   return ...;
}

我正在考虑将所有逻辑移动到自定义挂钩 useMyComponentLogic();

function useMyComponentLogic() {
   const { navigation } = useNavigation();

   const start = (data) => {
      navigation.navigate("Somewhere", { data });
   };

   const listenData = (doc) => {
      const { something } = doc.data();
      start(something);
   };

   useEffect(() => {
      const listener = listenDB((data) => {
        setData(data);
      };

      return () => listener();
   }, []);
}

然后在我的组件中使用它：

function MyComponent() {
    useMyComponentLogic();

    return <View>...</View>;
}

有了这个，我的钩子似乎做了两件事：

1. Handle navigation
2. Listening to db

将所有职责（例如在侦听数据时导航）委托给自定义钩子是否是一种反模式？

4

1 回答 1

1

我不认为这是一种反模式，恰恰相反，我认为它是一种关注点分离的模式。

组件是视图，它应该只包括视图、视图逻辑和事件处理程序。

每个自定义钩子应该只关注一个功能和逻辑。对于您的情况，最好创建两个自定义挂钩：useDB和useNavigation. Hooks 只是 js 函数，好的函数是紧凑的，只做一件事。

来自文档useYourImagination()

尽量避免过早地添加抽象。现在函数组件可以做更多的事情，你的代码库中的平均函数组件很可能会变得更长。这很正常——不要觉得你必须立即将其拆分为 Hooks。但我们也鼓励您开始发现自定义 Hook 可以将复杂逻辑隐藏在简单界面后面或帮助解开杂乱组件的情况。

并且使用react-hooks-testing-library来测试每个小的自定义钩子很容易，而不是一个组件包含一个很大的东西。

我使用这个架构，它运行良好React & Redux 应用架构

于 2021-11-16T09:50:58.413 回答