hooks寫React組件的5個(gè)注意細(xì)節(jié)詳解

更新時(shí)間：2023年03月13日 11:07:40 作者：forrest醬

這篇文章主要為大家介紹了hooks寫React組件的5個(gè)需要注意的細(xì)節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

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

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 都會(huì)使組件重新渲染一次，而這個(gè)渲染并不是我們需要的，多出來的渲染會(huì)使得頁面的性能變差，因此我們可以改造一下代碼，如下代碼：

推薦√如果我們只是單純的想要一個(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)的鏈接。因此我們可以改造一下代碼，如下代碼：

03.通過useEffect來處理actions

有時(shí)候，我們只想在 React 更新 DOM 之后運(yùn)行一些額外的代碼。比如發(fā)送網(wǎng)絡(luò)請求，手動(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è)用來請求異步數(shù)據(jù)，第二個(gè)用來調(diào)用回調(diào)函數(shù)。在第一個(gè)異步請求數(shù)據(jù)成功，才會(huì)觸發(fā)第二個(gè) useEffect 的執(zhí)行，但是，我們并不能完全保證，第二個(gè) useEffect 的依賴項(xiàng)完全受控于第一個(gè) 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é)組件

什么時(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è)不同的東西，一次做不止一件事情并不是很理想。此外，它還使得在其他地方測試或重用組件變得更加困難。因此我們可以改造一下代碼，如下代碼：

推薦√

將條件提升一級(jí)，可以更容易地看到組件的用途，并且它們只有一個(gè)職責(zé)，即<Tabs/>或<BurgerButton/>，而不是試圖同時(shí)成為兩個(gè)不同的東西。

function Header(props) {
  return (
    &lt;header&gt;
      {isMobile() ? &lt;BurgerButton menuItems={menuItems} /&gt; : &lt;Tabs tabData={menuItems} /&gt;}
    &lt;/header&gt;
  )
}

05.單一職責(zé)useEffects

通過對比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組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: