欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年03月13日 11:07:40   作者:forrest醬  
這篇文章主要為大家介紹了hooks寫React組件的5個需要注意的細(xì)節(jié)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

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

推薦√如果我們只是單純的想要一個能在組件聲明周期內(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)常在組件中寫了一個按鈕,通過點(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ì))的要求,此類按鈕并不會被屏幕閱讀器當(dāng)作一個可以跳轉(zhuǎn)的鏈接。因此我們可以改造一下代碼,如下代碼:

推薦√

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

03.通過useEffect來處理actions

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

不推薦×

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 (
    &lt;header&gt;
      {isMobile() ? &lt;BurgerButton menuItems={menuItems} /&gt; : &lt;Tabs tabData={menuItems} /&gt;}
    &lt;/header&gt;
  )
}

05.單一職責(zé)useEffects

通過對比componentWillReceivePropscomponentDidUpdate方法,才認(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(() => {
    updateBreadcrumbs();
  }, [location.pathname]);
  useEffect(()=>{
    fetchData();
  },[])
  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

參考:Five common mistakes writing react components (with hooks) in 2020

以上就是hooks寫React組件的5個注意細(xì)節(jié)詳解的詳細(xì)內(nèi)容,更多關(guān)于hooks寫React組件的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • React通過classnames庫添加類的方法

    React通過classnames庫添加類的方法

    這篇文章主要介紹了React通過classnames庫添加類,在vue中添加class是一件非常簡單的事情,你可以通過傳入一個對象, 通過布爾值決定是否添加類,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • React路由的history對象的插件history的使用解讀

    React路由的history對象的插件history的使用解讀

    這篇文章主要介紹了React路由的history對象的插件history的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React實(shí)現(xiàn)組件間通信的幾種方式小結(jié)

    React實(shí)現(xiàn)組件間通信的幾種方式小結(jié)

    在React應(yīng)用中,組件間的通信是一個基礎(chǔ)而關(guān)鍵的概念,理解和掌握不同組件之間的通信方式,可以幫助我們構(gòu)建出更加模塊化、可維護(hù)和可擴(kuò)展的應(yīng)用程序,React提供了多種組件通信的方法,本文給大家詳細(xì)的介紹了這些方法,需要的朋友可以參考下
    2024-07-07
  • 使用React實(shí)現(xiàn)內(nèi)容滑動組件效果

    使用React實(shí)現(xiàn)內(nèi)容滑動組件效果

    這篇文章主要介紹了使用React實(shí)現(xiàn)一個內(nèi)容滑動組件效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • 使用webpack搭建react開發(fā)環(huán)境的方法

    使用webpack搭建react開發(fā)環(huán)境的方法

    本篇文章主要介紹了使用webpack搭建react開發(fā)環(huán)境的方法,在這篇文章中我們開始利用我們之前所學(xué)搭建一個簡易的React開發(fā)環(huán)境,用以鞏固我們之前學(xué)習(xí)的Webpack知識。一起跟隨小編過來看看吧
    2018-05-05
  • React三大屬性之Refs的使用詳解

    React三大屬性之Refs的使用詳解

    這篇文章主要介紹了React三大屬性之Refs的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • 原生+React實(shí)現(xiàn)懶加載(無限滾動)列表方式

    原生+React實(shí)現(xiàn)懶加載(無限滾動)列表方式

    這篇文章主要介紹了原生+React實(shí)現(xiàn)懶加載(無限滾動)列表方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • react中useState改變值不渲染的解決方式

    react中useState改變值不渲染的解決方式

    這篇文章主要介紹了react中useState改變值不渲染的解決方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • react-router-dom入門使用教程(前端路由原理)

    react-router-dom入門使用教程(前端路由原理)

    這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關(guān)理解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • React Native 環(huán)境搭建的教程

    React Native 環(huán)境搭建的教程

    本篇文章主要介紹了React Native 環(huán)境搭建的教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08

最新評論