教你應(yīng)用?SOLID?原則整理?React?代碼之單一原則
SOLID 原則的主要是作為關(guān)心自己工作的軟件專業(yè)人員的指導(dǎo)方針，那些以經(jīng)得起時間考驗的設(shè)計精美的代碼庫為榮的人。
今天，我們將從一個糟糕的代碼示例開始，應(yīng)用 SOLID 的第一個原則，看看它如何幫助我們編寫小巧、漂亮、干凈的并明確責(zé)任的 React 組件，。
什么是單一責(zé)任原則？
單一責(zé)任原則告訴我們的是，每個類或組件應(yīng)該有一個單一的存在目的。
組件應(yīng)該只做一件事，并且做得很好。
讓我們重構(gòu)一段糟糕但正常工作的代碼，并使用這個原則使其更加清晰和完善。
讓我們從一個糟糕的例子開始
首先讓我們看看一些違反這一原則的代碼，添加注釋是為了更好地理解:
import?React,?{useEffect,?useReducer,?useState}?from?"react";
const?initialState?=?{
????isLoading:?true
};
//?復(fù)雜的狀態(tài)管理
function?reducer(state,?action)?{
????switch?(action.type)?{
????????case?'LOADING':
????????????return?{isLoading:?true};
????????case?'FINISHED':
????????????return?{isLoading:?false};
????????default:
????????????return?state;
????}
}
export?const?SingleResponsibilityPrinciple?=?()?=>?{
????const?[users?,?setUsers]?=?useState([])
????const?[filteredUsers?,?setFilteredUsers]?=?useState([])
????const?[state,?dispatch]?=?useReducer(reducer,?initialState);
????const?showDetails?=?(userId)?=>?{
????????const?user?=?filteredUsers.find(user?=>?user.id===userId);
????????alert(user.contact)
????}
????//?遠程數(shù)據(jù)獲取
????useEffect(()?=>?{
????????dispatch({type:'LOADING'})
????????fetch('https://jsonplaceholder.typicode.com/users')
????????????.then(response?=>?response.json())
????????????.then(json?=>?{
????????????????dispatch({type:'FINISHED'})
????????????????setUsers(json)
????????????})
????},[])
????//?數(shù)據(jù)處理
????useEffect(()?=>?{
????????const?filteredUsers?=?users.map(user?=>?{
????????????return?{
????????????????id:?user.id,
????????????????name:?user.name,
????????????????contact:?`${user.phone}?,?${user.email}`
????????????};
????????});
????????setFilteredUsers(filteredUsers)
????},[users])
????//?復(fù)雜UI渲染
????return?<>
????????<div>?Users?List</div>
????????<div>?Loading?state:?{state.isLoading??'Loading':?'Success'}</div>
????????{users.map(user?=>?{
????????????return?<div?key={user.id}?onClick={()?=>?showDetails(user.id)}>
????????????????<div>{user.name}</div>
????????????????<div>{user.email}</div>
????????????</div>
????????})}
????</>
}這段代碼的作用
這是一個函數(shù)式組件，我們從遠程數(shù)據(jù)源獲取數(shù)據(jù)，再過濾數(shù)據(jù)，然后在 UI 中顯示數(shù)據(jù)。我們還檢測 API 調(diào)用的加載狀態(tài)。
為了更好地理解這個例子，我把它簡化了。但是你幾乎可以在任何地方的同一個組件中找到它們！這里發(fā)生了很多事情:
遠程數(shù)據(jù)的獲取
數(shù)據(jù)過濾
復(fù)雜的狀態(tài)管理
復(fù)雜的 UI 功能
因此，讓我們探索如何改進代碼的設(shè)計并使其緊湊。
1. 移動數(shù)據(jù)處理邏輯
不要將 HTTP 調(diào)用保留在組件中。這是經(jīng)驗之談。您可以采用幾種策略從組件中刪除這些代碼。
您至少應(yīng)該創(chuàng)建一個自定義 Hook 并將數(shù)據(jù)獲取邏輯移動到那里。例如，我們可以創(chuàng)建一個名為 useGetRemoteData 的 Hook，如下所示:
import?{useEffect,?useReducer,?useState}?from?"react";
const?initialState?=?{
????isLoading:?true
};
function?reducer(state,?action)?{
????switch?(action.type)?{
????????case?'LOADING':
????????????return?{isLoading:?true};
????????case?'FINISHED':
????????????return?{isLoading:?false};
????????default:
????????????return?state;
????}
}
export?const?useGetRemoteData?=?(url)?=>?{
????const?[users?,?setUsers]?=?useState([])
????const?[state,?dispatch]?=?useReducer(reducer,?initialState);
????const?[filteredUsers?,?setFilteredUsers]?=?useState([])
????useEffect(()?=>?{
????????dispatch({type:'LOADING'})
????????fetch('https://jsonplaceholder.typicode.com/users')
????????????.then(response?=>?response.json())
????????????.then(json?=>?{
????????????????dispatch({type:'FINISHED'})
????????????????setUsers(json)
????????????})
????},[])
????useEffect(()?=>?{
????????const?filteredUsers?=?users.map(user?=>?{
????????????return?{
????????????????id:?user.id,
????????????????name:?user.name,
????????????????contact:?`${user.phone}?,?${user.email}`
????????????};
????????});
????????setFilteredUsers(filteredUsers)
????},[users])
????return?{filteredUsers?,?isLoading:?state.isLoading}
}現(xiàn)在我們的主要組件看起來像這樣:
import?React?from?"react";
import?{useGetRemoteData}?from?"./useGetRemoteData";
export?const?SingleResponsibilityPrinciple?=?()?=>?{
????const?{filteredUsers?,?isLoading}?=?useGetRemoteData()
????const?showDetails?=?(userId)?=>?{
????????const?user?=?filteredUsers.find(user?=>?user.id===userId);
????????alert(user.contact)
????}
????return?<>
????????<div>?Users?List</div>
????????<div>?Loading?state:?{isLoading??'Loading':?'Success'}</div>
????????{filteredUsers.map(user?=>?{
????????????return?<div?key={user.id}?onClick={()?=>?showDetails(user.id)}>
????????????????<div>{user.name}</div>
????????????????<div>{user.email}</div>
????????????</div>
????????})}
????</>
}看看我們的組件現(xiàn)在是多么的小，多么的容易理解！這是在錯綜復(fù)雜的代碼庫中所能做的最簡單、最重要的事情。
但我們可以做得更好。
2. 可重用的數(shù)據(jù)獲取鉤子
現(xiàn)在，當(dāng)我們看到我們 useGetRemoteData Hook 時，我們看到這個 Hook 正在做兩件事:
從遠程數(shù)據(jù)源獲取數(shù)據(jù)
過濾數(shù)據(jù)
讓我們把獲取遠程數(shù)據(jù)的邏輯提取到一個單獨的鉤子，這個鉤子的名字是 useHttpGetRequest，它把 URL 作為一個參數(shù):
import?{useEffect,?useReducer,?useState}?from?"react";
import?{loadingReducer}?from?"./LoadingReducer";
const?initialState?=?{
????isLoading:?true
};
export?const?useHttpGetRequest?=?(URL)?=>?{
????const?[users?,?setUsers]?=?useState([])
????const?[state,?dispatch]?=?useReducer(loadingReducer,?initialState);
????useEffect(()?=>?{
????????dispatch({type:'LOADING'})
????????fetch(URL)
????????????.then(response?=>?response.json())
????????????.then(json?=>?{
????????????????dispatch({type:'FINISHED'})
????????????????setUsers(json)
????????????})
????},[])
????return?{users?,?isLoading:?state.isLoading}
}我們還將 reducer 邏輯移除到一個單獨的文件中:
export?function?loadingReducer(state,?action)?{
????switch?(action.type)?{
????????case?'LOADING':
????????????return?{isLoading:?true};
????????case?'FINISHED':
????????????return?{isLoading:?false};
????????default:
????????????return?state;
????}
}所以現(xiàn)在我們的 useGetRemoteData 變成了:
import?{useEffect,?useState}?from?"react";
import?{useHttpGetRequest}?from?"./useHttpGet";
const?REMOTE_URL?=?'https://jsonplaceholder.typicode.com/users'
export?const?useGetRemoteData?=?()?=>?{
????const?{users?,?isLoading}?=?useHttpGetRequest(REMOTE_URL)
????const?[filteredUsers?,?setFilteredUsers]?=?useState([])
????useEffect(()?=>?{
????????const?filteredUsers?=?users.map(user?=>?{
????????????return?{
????????????????id:?user.id,
????????????????name:?user.name,
????????????????contact:?`${user.phone}?,?${user.email}`
????????????};
????????});
????????setFilteredUsers(filteredUsers)
????},[users])
????return?{filteredUsers?,?isLoading}
}干凈多了，對吧? 我們能做得更好嗎? 當(dāng)然，為什么不呢？
3. 分解 UI 組件
看看我們的組件，其中顯示了用戶的詳細信息。我們可以為此創(chuàng)建一個可重用的 UserDetails 組件:
const?UserDetails?=?(user)?=>?{
????const?showDetails?=?(user)?=>?{
????????alert(user.contact)
????}
????return?<div?key={user.id}?onClick={()?=>?showDetails(user)}>
????????<div>{user.name}</div>
????????<div>{user.email}</div>
????</div>
}最后，我們的原始組件變成:
import?React?from?"react";
import?{useGetRemoteData}?from?"./useGetRemoteData";
export?const?Users?=?()?=>?{
????const?{filteredUsers?,?isLoading}?=?useGetRemoteData()
????return?<>
????????<div>?Users?List</div>
????????<div>?Loading?state:?{isLoading??'Loading':?'Success'}</div>
????????{filteredUsers.map(user?=>?<UserDetails?user={user}/>)}
????</>
}我們把代碼從 60 行精簡到了 12 行！我們創(chuàng)建了五個獨立的組成部分，每個部分都有明確而單一的職責(zé)。
讓我們回顧一下我們剛剛做了什么
讓我們回顧一下我們的組件，看看我們是否實現(xiàn)了 SRP:
Users.js- 負責(zé)顯示用戶列表UserDetails.jsー 負責(zé)顯示用戶的詳細資料useGetRemoteData.js- 負責(zé)過濾遠程數(shù)據(jù)useHttpGetrequest.js- 負責(zé) HTTP 調(diào)用LoadingReducer.js- 復(fù)雜的狀態(tài)管理
當(dāng)然，我們可以改進很多其他的東西，但是這應(yīng)該是一個很好的起點。
總結(jié)
這是一個簡單的演示，演示如何減少每個文件中的代碼量，并使用 SOLID 的強大功能創(chuàng)建漂亮的可重用組件。
到此這篇關(guān)于如何應(yīng)用 SOLID 原則整理 React 代碼之單一原則的文章就介紹到這了,更多相關(guān)React SOLID單一原則內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中useEffect原理的代碼簡單實現(xiàn)詳解
React的useEffect鉤子是React函數(shù)組件中處理副作用,本文將通過一個簡單的例子解釋如何用代碼實現(xiàn)useEffect的基本原理,感興趣的小伙伴可以了解下2023-12-12
react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局
這篇文章主要為大家詳細介紹了react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局，一個路由小案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
在React中,我們經(jīng)常在子組件中調(diào)用父組件的方法,一般用props回調(diào)即可,這篇文章主要介紹了React父組件如何調(diào)用子組件的方法推薦,需要的朋友可以參考下2023-11-11
在react中我們使用其提供的Hooks中的useState,useEffect,useCallback 時,可能會造成閉包陷阱,下面我們來看一下出現(xiàn)的情況以及如何解決,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
React事件監(jiān)聽和State狀態(tài)修改方式
這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
郵箱、手機驗證碼輸入是許多在線服務(wù)和網(wǎng)站常見的安全驗證方式之一,本文主要來和大家討論一下如何使用React封裝一個驗證碼輸入控件,感興趣的可以了解下2024-03-03
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-01-01
React使用react-sortable-hoc如何實現(xiàn)拖拽效果
這篇文章主要介紹了React使用react-sortable-hoc如何實現(xiàn)拖拽效果問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了React?Native與iOS?OC之間的交互示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了react 下拉框內(nèi)容回顯,實現(xiàn)思路是通過將下拉框選項的value和label一起存儲到state中, 初始化表單數(shù)據(jù)時將faqType對應(yīng)的label查找出來并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下2024-05-05