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