常見使用

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

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

附線上運(yùn)行代碼

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

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

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

上面例子中，useEffect()的第二個(gè)參數(shù)是一個(gè)數(shù)組，指定了第一個(gè)參數(shù)（副效應(yīng)函數(shù)）的依賴項(xiàng)（props.name）。

只有該變量發(fā)生變化時(shí)，副效應(yīng)函數(shù)才會(huì)執(zhí)行。如果第二個(gè)參數(shù)是一個(gè)空數(shù)組，就表明副效應(yīng)參數(shù)沒有任何依賴項(xiàng)。因此，副效應(yīng)函數(shù)這時(shí)只會(huì)在組件加載進(jìn)入 DOM 后執(zhí)行一次，后面組件重新渲染，就不會(huì)再次執(zhí)行。

這很合理，由于副效應(yīng)不依賴任何變量，所以那些變量無論怎么變，副效應(yīng)函數(shù)的執(zhí)行結(jié)果都不會(huì)改變，所以運(yùn)行一次就夠了。

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

副效應(yīng)是隨著組件加載而發(fā)生的，那么組件卸載時(shí)，可能需要清理這些副效應(yīng)。

useEffect()允許返回一個(gè)函數(shù)，在組件卸載時(shí)，執(zhí)行該函數(shù)，清理副效應(yīng)。如果不需要清理副效應(yīng)，useEffect()就不用返回任何值。

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

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

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

useEffect() 的注意點(diǎn)

使用useEffect()時(shí)，有一點(diǎn)需要注意。如果有多個(gè)副效應(yīng)，應(yīng)該調(diào)用多個(gè)useEffect()，而不應(yīng)該合并寫在一起。

錯(cuò)誤寫法：

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

上面的例子是錯(cuò)誤的寫法，副效應(yīng)函數(shù)里面有兩個(gè)定時(shí)器，它們之間并沒有關(guān)系，其實(shí)是兩個(gè)不相關(guān)的副效應(yīng)，不應(yīng)該寫在一起。

正確的寫法是將它們分開寫成兩個(gè)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>;
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論