日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

hooks中useEffect()使用案例詳解_React

作者：黃庚中 ? 更新時間： 2022-11-08 編程語言

常見使用:

獲取數據案例:

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()用來生成一個狀態變量（data），保存獲取的數據；useEffect()的副效應函數內部有一個 async 函數，用來從服務器異步獲取數據。拿到數據以后，再用setData()觸發組件的重新渲染。

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

附線上運行代碼

useEffect() 的第二個參數說明

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

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

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

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

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

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

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

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

useEffect() 的注意點

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

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>;
}

上面的例子是錯誤的寫法，副效應函數里面有兩個定時器，它們之間并沒有關系，其實是兩個不相關的副效應，不應該寫在一起。正確的寫法是將它們分開寫成兩個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>;
}

原文鏈接：https://blog.csdn.net/xiaodi520520/article/details/110169180

欄目分類
最近更新