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

hooks中useEffect()使用案例詳解

 更新時間:2022年09月16日 14:51:29   作者:黃庚中  
這篇文章主要介紹了hooks中useEffect()使用總結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

常見使用:

獲取數(shù)據(jù)案例:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;

上面例子中,useState()用來生成一個狀態(tài)變量(data),保存獲取的數(shù)據(jù);useEffect()的副效應(yīng)函數(shù)內(nèi)部有一個 async 函數(shù),用來從服務(wù)器異步獲取數(shù)據(jù)。拿到數(shù)據(jù)以后,再用setData()觸發(fā)組件的重新渲染。

由于獲取數(shù)據(jù)只需要執(zhí)行一次,所以上例的useEffect()的第二個參數(shù)為一個空數(shù)組

附線上運行代碼

useEffect() 的第二個參數(shù)說明

有時候,我們不希望useEffect()每次渲染都執(zhí)行,這時可以使用它的第二個參數(shù),使用一個數(shù)組指定副效應(yīng)函數(shù)的依賴項,只有依賴項發(fā)生變化,才會重新渲染。

function Welcome(props) {
  useEffect(() => {
    document.title = `Hello, ${props.name}`;
  }, [props.name]);
  return <h1>Hello, {props.name}</h1>;
}

上面例子中,useEffect()的第二個參數(shù)是一個數(shù)組,指定了第一個參數(shù)(副效應(yīng)函數(shù))的依賴項(props.name)。只有該變量發(fā)生變化時,副效應(yīng)函數(shù)才會執(zhí)行。如果第二個參數(shù)是一個空數(shù)組,就表明副效應(yīng)參數(shù)沒有任何依賴項。因此,副效應(yīng)函數(shù)這時只會在組件加載進入 DOM 后執(zhí)行一次,后面組件重新渲染,就不會再次執(zhí)行。這很合理,由于副效應(yīng)不依賴任何變量,所以那些變量無論怎么變,副效應(yīng)函數(shù)的執(zhí)行結(jié)果都不會改變,所以運行一次就夠了。

useEffect() 第一個函數(shù)參數(shù)的返回值

副效應(yīng)是隨著組件加載而發(fā)生的,那么組件卸載時,可能需要清理這些副效應(yīng)。
useEffect()允許返回一個函數(shù),在組件卸載時,執(zhí)行該函數(shù),清理副效應(yīng)。如果不需要清理副效應(yīng),useEffect()就不用返回任何值。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

上面例子中,useEffect()在組件加載時訂閱了一個事件,并且返回一個清理函數(shù),在組件卸載時取消訂閱。

實際使用中,由于副效應(yīng)函數(shù)默認是每次渲染都會執(zhí)行,所以清理函數(shù)不僅會在組件卸載時執(zhí)行一次,每次副效應(yīng)函數(shù)重新執(zhí)行之前,也會執(zhí)行一次,用來清理上一次渲染的副效應(yīng)。

useEffect() 的注意點

使用useEffect()時,有一點需要注意。如果有多個副效應(yīng),應(yīng)該調(diào)用多個useEffect(),而不應(yīng)該合并寫在一起。
錯誤寫法:

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);
  useEffect(() => {
    const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
    const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);

    return () => {
      clearTimeout(timeoutA);
      clearTimeout(timeoutB);
    };
  }, [varA, varB]);

  return <span>{varA}, {varB}</span>;
}

上面的例子是錯誤的寫法,副效應(yīng)函數(shù)里面有兩個定時器,它們之間并沒有關(guān)系,其實是兩個不相關(guān)的副效應(yīng),不應(yīng)該寫在一起。正確的寫法是將它們分開寫成兩個useEffect()。
正確寫法:

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    return () => clearTimeout(timeout);
  }, [varA]);

  useEffect(() => {
    const timeout = setTimeout(() => setVarB(varB + 2), 2000);

    return () => clearTimeout(timeout);
  }, [varB]);

  return <span>{varA}, {varB}</span>;
}

到此這篇關(guān)于hooks中useEffect()使用總結(jié)的文章就介紹到這了,更多相關(guān)hooks useEffect()使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 想用好React的你必須要知道的一些事情

    想用好React的你必須要知道的一些事情

    現(xiàn)在最熱門的前端框架,毫無疑問是 React 。下面這篇文章主要給大家分享了關(guān)于想用好React的你必須要知道的一些事情,文中介紹的非常詳細,對大家具有一定參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • React props和state屬性的具體使用方法

    React props和state屬性的具體使用方法

    本篇文章主要介紹了React props和state屬性的具體使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • 關(guān)于React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄

    關(guān)于React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄

    這篇文章主要介紹了React中使用window.print()出現(xiàn)頁面無響應(yīng)問題解決記錄,首先問題原因可能是操作了document但是并未進行銷毀(可能是),具體問題解決思路參考下本文吧
    2021-11-11
  • React移動端項目之pdf預(yù)覽問題

    React移動端項目之pdf預(yù)覽問題

    這篇文章主要介紹了React移動端項目之pdf預(yù)覽問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • JavaScript中的useRef 和 useState介紹

    JavaScript中的useRef 和 useState介紹

    這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹,下列文章,我們將學習 useRef 和 useState hook是什么,它們的區(qū)別以及何時使用哪個。 這篇文章中的代碼示例將僅涉及功能組件,但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下
    2021-11-11
  • React Diff原理深入分析

    React Diff原理深入分析

    這篇文章主要介紹了React Diff原理的相關(guān)資料,幫助大家更好的理解和學習使用React框架,感興趣的朋友可以了解下
    2021-04-04
  • 詳解React組件卸載怎么中止遞歸方法

    詳解React組件卸載怎么中止遞歸方法

    最近在處理項目代碼的時候,出現(xiàn)了一個bug,組件中的方法在組件卸載后仍然在執(zhí)行,代碼片段發(fā)給我看,但是變量的用意我也不懂,只看到有方法調(diào)用自身方法,這不就是遞歸嘛,所以本文詳細給大家介紹了React組件卸載怎么中止遞歸方法,需要的朋友可以參考下
    2024-01-01
  • React中阻止事件冒泡的問題詳析

    React中阻止事件冒泡的問題詳析

    這篇文章主要給大家介紹了關(guān)于React中阻止事件冒泡問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用React具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-04-04
  • 淺談python的函數(shù)知識

    淺談python的函數(shù)知識

    這篇文章主要為大家介紹了python的函數(shù),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • react使用節(jié)流函數(shù)防止重復(fù)點擊問題

    react使用節(jié)流函數(shù)防止重復(fù)點擊問題

    這篇文章主要介紹了react使用節(jié)流函數(shù)防止重復(fù)點擊問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06

最新評論