快捷導(dǎo)航

使用hooks寫React組件需要注意的5個地方

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

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

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] = 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>
 )
}

問題所在：仔細(xì)看上面的代碼，乍一看其實也沒什么問題，點擊按鈕更新 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)常在組件中寫了一個按鈕，通過點擊按鈕的事件來處理路由的跳轉(zhuǎn)，如下代碼：

不推薦×

function ClickButton(props){
 const history = useHistory()
 const onClickGo = () => {
  history.push('/where-page')
 }
 return <button onClick={onClickGo}>Go to where</button>
}

問題所在：盡管上述代碼可以正常工作，但是卻不符合Accessibility（易訪問性設(shè)計）的要求，此類按鈕并不會被屏幕閱讀器當(dāng)作一個可以跳轉(zhuǎn)的鏈接。因此我們可以改造一下代碼，如下代碼：

推薦√

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

03.通過useEffect來處理actions

有時候，我們只想在 React 更新 DOM 之后運行一些額外的代碼。比如發(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 的依賴項完全受控于第一個 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è)計組件時的一個常見錯誤是將兩個用例組合成一個組件。

不推薦×

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

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