hooks寫React組件的5個注意細(xì)節(jié)詳解
正文
Hook是React16.8開始新增的特性。雖然React官方文檔已經(jīng)作出了針對React hooks的相關(guān)概念的講解,但是光看官方文檔是很難將hooks使用好的,在編寫hooks的過程中很容易跳進(jìn)陷阱和錯誤。本文總結(jié)了5個不好的地方。
01.不需要render的場景下使用useState
在函數(shù)組件中我們可以使用useState
來管理狀態(tài),這使得對狀態(tài)的管理變得很簡單,但是也容易被濫用,我們通過下面的代碼樣例看下容易忽略的地方。
不推薦×
function ClickButton(props){ const [count, setCount] = useState(0) const onClickCount = () => { setCount((c) => c + 1) } const onClickRequest = () => { apiCall(count) } return ( <div> <button onClick={onClickCount}>Click</button> <button onClick={onClickRequest}>Submit</button> </div> ) }
問題所在:仔細(xì)看上面的代碼,乍一看其實(shí)也沒什么問題,點(diǎn)擊按鈕更新 count
。但是問題也就出在這里,我們的 return
部分并沒有用到 count 狀態(tài),而每次 setCount
都會使組件重新渲染一次,而這個渲染并不是我們需要的,多出來的渲染會使得頁面的性能變差,因此我們可以改造一下代碼,如下代碼:
推薦√如果我們只是單純的想要一個能在組件聲明周期內(nèi)保存的變量,但是變量的更新不需要組件的重新渲染,我們可以使用 useRef
鉤子。
function ClickButton(props){ const count = useRef(0) const onClickCount = () => { count.current++ } const onClickRequest = () => { apiCall(count.current) } return ( <div> <button onClick={onClickCount}>Click</button> <button onClick={onClickRequest}>Submit</button> </div> ) }
02.使用了router.push而非link
在React SPA應(yīng)用中,我們用react-router來處理路由的跳轉(zhuǎn),我們很經(jīng)常在組件中寫了一個按鈕,通過點(diǎn)擊按鈕的事件來處理路由的跳轉(zhuǎn),如下代碼:
不推薦×
function ClickButton(props){ const history = useHistory() const onClickGo = () => { history.push('/where-page') } return <button onClick={onClickGo}>Go to where</button> }
問題所在:盡管上述代碼可以正常工作,但是卻不符合Accessibility(易訪問性設(shè)計(jì))的要求,此類按鈕并不會被屏幕閱讀器當(dāng)作一個可以跳轉(zhuǎn)的鏈接。因此我們可以改造一下代碼,如下代碼:
推薦√
function ClickButton(props){ return <Link to="/next-page"> <span>Go to where</span> </Link> }
03.通過useEffect來處理actions
有時候,我們只想在 React 更新 DOM 之后運(yùn)行一些額外的代碼。比如發(fā)送網(wǎng)絡(luò)請求,手動變更 DOM,記錄日志。
不推薦×
function DataList({ onSuccess }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [data, setData] = useState(null); const fetchData = () => { setLoading(true); callApi() .then((res) => setData(res)) .catch((err) => setError(err)) .finally(() => setLoading(false)); }; useEffect(() => { fetchData(); }, []); useEffect(() => { if (!loading && !error && data) { onSuccess(); } }, [loading, error, data, onSuccess]); return <div>Data: {data}</div>; }
問題所在:上面的代碼使用了兩個useEffect
,第一個用來請求異步數(shù)據(jù),第二個用來調(diào)用回調(diào)函數(shù)。在第一個異步請求數(shù)據(jù)成功,才會觸發(fā)第二個 useEffect
的執(zhí)行,但是,我們并不能完全保證,第二個 useEffect
的依賴項(xiàng)完全受控于第一個 useEffect
的成功請求數(shù)據(jù)。因此我們可以改造一下代碼,如下代碼:
推薦√
function DataList({ onSuccess }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [data, setData] = useState(null); const fetchData = () => { setLoading(true); callApi() .then((res) => { setData(res) onSuccess() }) .catch((err) => setError(err)) .finally(() => setLoading(false)); }; useEffect(() => { fetchData(); }, []); return <div>Data: {data}</div>; }
04.單一職責(zé)組件
什么時候該把一個組件分成幾個更小的組件?如何構(gòu)建組件樹?在使用基于組件的框架時,所有這些問題每天都會出現(xiàn)。然而,設(shè)計(jì)組件時的一個常見錯誤是將兩個用例組合成一個組件。
不推薦×
function Header({ menuItems }) { return ( <header> <HeaderInner menuItems={menuItems} /> </header> ); } function HeaderInner({ menuItems }) { return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />; }
問題所在:上面的代碼通過這種方法,組件HeaderInner
試圖同時成為兩個不同的東西,一次做不止一件事情并不是很理想。此外,它還使得在其他地方測試或重用組件變得更加困難。因此我們可以改造一下代碼,如下代碼:
推薦√
將條件提升一級,可以更容易地看到組件的用途,并且它們只有一個職責(zé),即<Tabs/>
或<BurgerButton/>
,而不是試圖同時成為兩個不同的東西。
function Header(props) { return ( <header> {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />} </header> ) }
05.單一職責(zé)useEffects
通過對比componentWillReceiveProps
或componentDidUpdate
方法,才認(rèn)識到userEffect
的美麗。但是沒有妥當(dāng)使用useEffect也是容易出問題的。
不推薦×
function Example(props) { const location = useLocation(); const fetchData = () => { /* Calling the api */ }; const updateBreadcrumbs = () => { /* Updating the breadcrumbs*/ }; useEffect(() => { fetchData(); updateBreadcrumbs(); }, [location.pathname]); return ( <div> <BreadCrumbs /> </div> ); }
問題所在:上面的useEffect
同時觸發(fā)了兩個副作用,但是并不都是我們需要的副作用,因此我們可以改造一下代碼,如下代碼:
推薦√將兩個副作用從一個useEffect中分離出來。
function Example(props) { const location = useLocation(); const fetchData = () => { /* Calling the api */ }; const updateBreadcrumbs = () => { /* Updating the breadcrumbs*/ }; useEffect(() => { updateBreadcrumbs(); }, [location.pathname]); useEffect(()=>{ fetchData(); },[]) return ( <div> <BreadCrumbs /> </div> ); }
參考:Five common mistakes writing react components (with hooks) in 2020
以上就是hooks寫React組件的5個注意細(xì)節(jié)詳解的詳細(xì)內(nèi)容,更多關(guān)于hooks寫React組件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React路由的history對象的插件history的使用解讀
這篇文章主要介紹了React路由的history對象的插件history的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10React實(shí)現(xiàn)組件間通信的幾種方式小結(jié)
在React應(yīng)用中,組件間的通信是一個基礎(chǔ)而關(guān)鍵的概念,理解和掌握不同組件之間的通信方式,可以幫助我們構(gòu)建出更加模塊化、可維護(hù)和可擴(kuò)展的應(yīng)用程序,React提供了多種組件通信的方法,本文給大家詳細(xì)的介紹了這些方法,需要的朋友可以參考下2024-07-07使用React實(shí)現(xiàn)內(nèi)容滑動組件效果
這篇文章主要介紹了使用React實(shí)現(xiàn)一個內(nèi)容滑動組件效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05使用webpack搭建react開發(fā)環(huán)境的方法
本篇文章主要介紹了使用webpack搭建react開發(fā)環(huán)境的方法,在這篇文章中我們開始利用我們之前所學(xué)搭建一個簡易的React開發(fā)環(huán)境,用以鞏固我們之前學(xué)習(xí)的Webpack知識。一起跟隨小編過來看看吧2018-05-05原生+React實(shí)現(xiàn)懶加載(無限滾動)列表方式
這篇文章主要介紹了原生+React實(shí)現(xiàn)懶加載(無限滾動)列表方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03react-router-dom入門使用教程(前端路由原理)
這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關(guān)理解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08