React Custom Hooks-将所有责任委托给一个自定义挂钩.反模式

Question

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

这是我的原始组件：

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

将所有职责(如在侦听数据时导航(委托给自定义挂钩是一种反模式吗？

Answer 1

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

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

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

从文档使用YourMagination((

尽量避免过早添加抽象。既然函数组件可以做得更多，那么代码库中的平均函数组件可能会变得更长。这很正常——不要觉得你必须马上把它分成钩子。但我们也鼓励您开始发现自定义Hook可以在简单界面后面隐藏复杂逻辑，或者帮助解开混乱的组件的情况。

而且使用react hooks测试库来测试每个小的自定义hook很容易，而不是组件包含一个大的东西。

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