快捷導(dǎo)航

使用hooks寫(xiě)React組件需要注意的5個(gè)地方

更新時(shí)間：2021年04月07日 09:57:07 作者：forrest醬

這篇文章主要介紹了使用hooks寫(xiě)React組件需要注意的5個(gè)地方，幫助大家更好的理解和學(xué)習(xí)使用React組件，感興趣的朋友可以了解下

Hook是React16.8開(kāi)始新增的特性。雖然React官方文檔已經(jīng)作出了針對(duì)React hooks的相關(guān)概念的講解，但是光看官方文檔是很難將hooks使用好的，在編寫(xiě)hooks的過(guò)程中很容易跳進(jìn)陷阱和錯(cuò)誤。本文總結(jié)了5個(gè)不好的地方。

01.不需要render的場(chǎng)景下使用useState

在函數(shù)組件中我們可以使用useState來(lái)管理狀態(tài)，這使得對(duì)狀態(tài)的管理變得很簡(jiǎn)單，但是也容易被濫用，我們通過(guò)下面的代碼樣例看下容易忽略的地方。

不推薦×

function ClickButton(props){
 const [count, setCount] = setState(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>
 )
}

02.使用了router.push而非link

在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ì)）的要求，此類按鈕并不會(huì)被屏幕閱讀器當(dāng)作一個(gè)可以跳轉(zhuǎn)的鏈接。因此我們可以改造一下代碼，如下代碼：

推薦√

function ClickButton(props){
 return <Link to="/next-page">
  <span>Go to where</span>
 </Link>
}

03.通過(guò)useEffect來(lái)處理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>;
}

問(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 的依賴項(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ù)？在使用基于組件的框架時(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>
 )
}

05.單一職責(zé)useEffects

通過(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(() => {
  fetchData();
  updateBreadcrumbs();
 }, [location.pathname]);

 return (
  <div>
   <BreadCrumbs />
  </div>
 );
}