React自定义Hooks：将所有职责委托给自定义Hook是否属于反模式？

首先直接给结论：这种做法不属于反模式，反而符合React自定义Hook的设计初衷，是合理的代码组织方式。

合理性说明 #

自定义Hook的核心设计目标就是封装与组件绑定的有状态逻辑、副作用逻辑，实现逻辑与视图的分离：

• 你当前的业务场景本身就是「监听数据库变更后触发导航」，两个逻辑是强绑定的同一业务流程，放在同一个Hook中完全符合单一职责原则（单一职责指的是同一模块只负责一个完整的业务域逻辑，而非只能执行单一技术动作）
• 逻辑抽离后组件只需要负责视图渲染，代码结构更清晰，后续排查问题、修改逻辑也不需要在大量视图代码中找业务逻辑

可优化方向 #

如果你希望进一步提升代码的复用性，降低逻辑耦合度，可以做如下调整：
把导航逻辑从Hook中剥离，作为回调参数传入，让监听数据库的逻辑完全独立，可被其他场景复用：

// 通用的数据库监听Hook
function useDBListener(onDataReceived) {
  useEffect(() => {
    const listener = listenDB((doc) => {
      const { something } = doc.data();
      onDataReceived?.(something);
    });
    return () => listener();
  }, [onDataReceived]);
}

// 组件内调用
function MyComponent() {
  const { navigation } = useNavigation();
  useDBListener((data) => {
    navigation.navigate("Somewhere", { data });
  });
  return <View>...</View>;
}

另外注意你当前示例代码中有个遗漏：setData 没有定义，要么是冗余代码，要么需要补充对应的状态声明。

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