我正在清理一個監聽我的資料庫的組件，當它有回應時，導航到特定的螢屏。
這是我的原始組件：
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
將所有職責（例如在偵聽資料時導航）委派給自定義鉤子是否是一種反模式？
uj5u.com熱心網友回復：
我不認為這是一種反模式，恰恰相反，我認為這是一種關注點分離的模式。
組件是視圖，它應該只包括視圖、視圖邏輯和事件處理程式。
每個自定義鉤子應該只關注一個功能和邏輯。對于您的情況，最好創建兩個自定義掛鉤：useDB和useNavigation. Hooks 只是 js 函式，好的函式是緊湊的，只做一件事。
來自檔案useYourImagination()
盡量避免過早添加抽象。現在函陣列件可以做更多的事情，代碼庫中的平均函陣列件很可能會變得更長。這是正常的——不要覺得您必須立即將其拆分為 Hooks。但我們也鼓勵您開始發現自定義 Hook 可以在簡單界面背后隱藏復雜邏輯的情況，或者幫助解開雜亂的組件。
并且使用react-hooks-testing-library而不是一個包含整個大事情的組件來測驗每個小的自定義鉤子很容易。
我使用這種架構，它運行良好React & Redux 應用程式架構
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/357553.html
標籤：javascript 反应 反应原生 反应钩子