您好,登錄后才能下訂單哦!
今天小編給大家分享一下hooks寫(xiě)React組件要注意哪些細(xì)節(jié)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
在函數(shù)組件中我們可以使用useState
來(lái)管理狀態(tài),這使得對(duì)狀態(tài)的管理變得很簡(jiǎn)單,但是也容易被濫用,我們通過(guò)下面的代碼樣例看下容易忽略的地方。
不推薦×
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> ) }
問(wèn)題所在:仔細(xì)看上面的代碼,乍一看其實(shí)也沒(méi)什么問(wèn)題,點(diǎn)擊按鈕更新 count
。但是問(wèn)題也就出在這里,我們的 return
部分并沒(méi)有用到 count 狀態(tài),而每次 setCount
都會(huì)使組件重新渲染一次,而這個(gè)渲染并不是我們需要的,多出來(lái)的渲染會(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> ) }
在React SPA應(yīng)用中,我們用react-router來(lái)處理路由的跳轉(zhuǎn),我們很經(jīng)常在組件中寫(xiě)了一個(gè)按鈕,通過(guò)點(diǎn)擊按鈕的事件來(lái)處理路由的跳轉(zhuǎn),如下代碼:
不推薦×
function ClickButton(props){ const history = useHistory() const onClickGo = () => { history.push('/where-page') } return <button onClick={onClickGo}>Go to where</button> }
問(wèn)題所在:盡管上述代碼可以正常工作,但是卻不符合Accessibility(易訪問(wèn)性設(shè)計(jì))的要求,此類(lèi)按鈕并不會(huì)被屏幕閱讀器當(dāng)作一個(gè)可以跳轉(zhuǎn)的鏈接。因此我們可以改造一下代碼,如下代碼:
推薦√
function ClickButton(props){ return <Link to="/next-page"> <span>Go to where</span> </Link> }
有時(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>; }
問(wèn)題所在:上面的代碼使用了兩個(gè)useEffect
,第一個(gè)用來(lái)請(qǐng)求異步數(shù)據(jù),第二個(gè)用來(lái)調(diào)用回調(diào)函數(shù)。在第一個(gè)異步請(qǐng)求數(shù)據(jù)成功,才會(huì)觸發(fā)第二個(gè) useEffect
的執(zhí)行,但是,我們并不能完全保證,第二個(gè) useEffect
的依賴(lài)項(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>; }
什么時(shí)候該把一個(gè)組件分成幾個(gè)更小的組件?如何構(gòu)建組件樹(shù)?在使用基于組件的框架時(shí),所有這些問(wèn)題每天都會(huì)出現(xiàn)。然而,設(shè)計(jì)組件時(shí)的一個(gè)常見(jiàn)錯(cuò)誤是將兩個(gè)用例組合成一個(gè)組件。
不推薦×
function Header({ menuItems }) { return ( <header> <HeaderInner menuItems={menuItems} /> </header> ); } function HeaderInner({ menuItems }) { return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />; }
問(wèn)題所在:上面的代碼通過(guò)這種方法,組件HeaderInner
試圖同時(shí)成為兩個(gè)不同的東西,一次做不止一件事情并不是很理想。此外,它還使得在其他地方測(cè)試或重用組件變得更加困難。因此我們可以改造一下代碼,如下代碼:
推薦√
將條件提升一級(jí),可以更容易地看到組件的用途,并且它們只有一個(gè)職責(zé),即<Tabs/>
或<BurgerButton/>
,而不是試圖同時(shí)成為兩個(gè)不同的東西。
function Header(props) { return ( <header> {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />} </header> ) }
通過(guò)對(duì)比componentWillReceiveProps
或componentDidUpdate
方法,才認(rèn)識(shí)到userEffect
的美麗。但是沒(méi)有妥當(dāng)使用useEffect也是容易出問(wèn)題的。
不推薦×
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> ); }
問(wèn)題所在:上面的useEffect
同時(shí)觸發(fā)了兩個(gè)副作用,但是并不都是我們需要的副作用,因此我們可以改造一下代碼,如下代碼:
推薦√將兩個(gè)副作用從一個(gè)useEffect中分離出來(lái)。
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> ); }
以上就是“hooks寫(xiě)React組件要注意哪些細(xì)節(jié)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。