五種有趣的 UseEffect 無限循環(huán)類型

作者：彈鐵蛋同學(xué) 2021-09-28 10:32:53

一般來說，無限循環(huán)被認(rèn)為是不好的做法。但在一些邊界 case 中，你沒有任何選擇，只能選擇無限循環(huán)。了解 React 的無限循環(huán)模式是件好事。

當(dāng)無限循環(huán)沒有無法停止時(shí)，最終瀏覽器會(huì)殺死你的代碼正在運(yùn)行的標(biāo)簽。所以不要使用沒有任何斷點(diǎn)的 “無限循環(huán)”。

useEffect

useEffect hook 允許我們?cè)谝粋€(gè)組件中表現(xiàn)出副作用。當(dāng) hooks 被引入 react 16 時(shí)，useEffect hooks 比其他 hooks 更有吸引力。因?yàn)樗峁┝?componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的綜合功能。

只有當(dāng)依賴關(guān)系被改變時(shí)，useEffect hook 才會(huì)觸發(fā)回調(diào)函數(shù)。而且它使用淺比較法來比較 hooks 的值。

你可以把 useEffect 看作是一塊能量石，它是一塊最強(qiáng)大的石頭，如果你沒有正確地處理它，這塊石頭會(huì)摧毀你。

缺失依賴

缺失依賴關(guān)系的 useEffect 通常被認(rèn)為是一種不好的做法，所以總是盡量避免它。

思考一下下面的代碼，它將一直調(diào)用 API。

useEffect(() => { 
  fetch("/api/user") 
    .then((res) => res.json) 
    .then((res) => { 
      setData(res); 
    }); 
});

會(huì)發(fā)生什么

如果 useEffect 只有在依賴關(guān)系發(fā)生變化時(shí)才觸發(fā)回調(diào)，那為什么我們?cè)谶@里會(huì)出現(xiàn)無限循環(huán)?

你需要考慮到 React 的另一個(gè)重要的法則，即 “當(dāng) state 或 props 發(fā)生變化時(shí)，組件將重新渲染”。

在這段代碼中，我們使用 setData 在網(wǎng)絡(luò)調(diào)用成功后設(shè)置狀態(tài)值，它將觸發(fā)組件的重新渲染。由于 useEffect 沒有值可以比較，所以它將調(diào)用回調(diào)。

Fetch 將再次觸發(fā)setData，setData將觸發(fā)組件重新渲染，如此反復(fù)。

如何修復(fù)這個(gè)問題?

我們需要將依賴指定為空數(shù)組。

useEffect(() => { 
  fetch("/api/user") 
    .then((res) => res.json) 
    .then((res) => { 
      setData(res); 
    }); 
}, []); // <- dependencies

根據(jù)官方文檔，省略依賴關(guān)系是不安全的

依賴性的作用

useEffect 使用淺層對(duì)象比較來確定數(shù)據(jù)是否被改變。因?yàn)槠婀值?JavaScript 條件判斷系統(tǒng) ??。

var mark1 = function () { 
  return "100"; 
}; // 唯一的對(duì)象引用 
var mark2 = function () { 
  return "100"; 
}; // 唯一的對(duì)象引用 
mark1 == mark2; // false 
mark1 === mark2; // false

讓我們看看以下代碼

import React, { useCallback, useEffect, useState } from "react"; 
export default function App() { 
  const [count, setCount] = useState(0); 
  const getData = () => { 
    return window.localStorage.getItem("token"); 
  }; 
  const [dep, setDep] = useState(getData()); 
  useEffect(() => { 
    setCount(count + 1); 
  }, [getData]); 
  return ( 
    <div className="App"> 
      <h1>Hello CodeSandbox</h1> 
      <button onClick={() => setCount(count + 1)}>{count}</button> 
      <h2>Start editing to see some magic happen!</h2> 
    </div> 
  ); 
}

函數(shù) getData 作為依賴項(xiàng)被傳入。

當(dāng)你運(yùn)行這段代碼時(shí)，它將拋出 “超過最大更新” 的錯(cuò)誤，這意味著代碼有一個(gè)無限循環(huán)。

發(fā)生了什么?

由于 useEffect 使用淺層比較法來比較數(shù)值。該函數(shù)的淺層比較將總是給出 false。

如何修復(fù)這個(gè)問題?

為了修復(fù)這個(gè)問題，我們需要使用另一個(gè)叫做 useCallback 的 hook。

useCallback 返回一個(gè)memoized 版本的回調(diào)，只在依賴關(guān)系改變時(shí)才會(huì)改變。

const getData = useCallback(() => { 
  return window.localStorage.getItem("token"); 
}, []); // <- dependencies

將數(shù)組作為依賴

你可能知道，二者的淺層比較總是假的，所以以數(shù)組形式傳遞依賴關(guān)系也會(huì)導(dǎo)致 “無限循環(huán)”。

讓我們看看以下代碼

import React, { useCallback, useEffect, useState } from "react"; 
export default function App() { 
  const [count, setCount] = useState(0); 
  const dep = ["a"]; 
  const [value, setValue] = useState(["b"]); 
  useEffect(() => { 
    setValue(["c"]); 
  }, [dep]); 
 
  return ( 
    <div className="App"> 
      <h1>Hello CodeSandbox</h1> 
      <button onClick={() => setCount(count + 1)}>{count}</button> 
      <h2>Start editing to see some magic happen!</h2> 
    </div> 
  ); 
}

這里，數(shù)組 dep 作為 useEffect 的依賴傳入。

當(dāng)你運(yùn)行這段代碼時(shí)，瀏覽器控制臺(tái)會(huì)拋出這個(gè)錯(cuò)誤。

發(fā)生了什么?

兩個(gè)數(shù)組的淺層比較總是假的，所以 useEffect 總是會(huì)觸發(fā)回調(diào)。

如果修復(fù)這個(gè)問題?

由于 useCallback 的返回是一個(gè)函數(shù)，我們不能使用。

那么，我們應(yīng)該怎么辦?

我們需要使用另一個(gè)名為 useRef 的 hook

useRef 返回一個(gè)可變的對(duì)象，.current 具有初始值。

將對(duì)象作為依賴

你可能會(huì)猜到兩個(gè)對(duì)象的淺層比較總是假的，所以 useEffect 會(huì)一直觸發(fā)回調(diào)。

讓我們看看一下這段代碼

import React, { useEffect, useState, useRef } from "react"; 
export default function Home() { 
  const [value, setValue] = useState(["b"]); 
  const { current: a } = useRef(["a"]); 
  useEffect(() => { 
    setValue(["c"]); 
  }, [a]); 
}

data 是作為 useEffect 的依賴項(xiàng)傳入的。

當(dāng)你運(yùn)行這段代碼時(shí)，你的瀏覽器控制臺(tái)將被拋出一個(gè)無限循環(huán)的錯(cuò)誤。

這里發(fā)生了什么?

對(duì)象的淺層比較將永遠(yuǎn)是假的，所以它將觸發(fā) useEffect 的回調(diào)。

如果修復(fù)這個(gè)問題?

如果我們將依賴關(guān)系備忘化，我們就能打破無限循環(huán)。那么，如何做到這一點(diǎn)呢?

是的，我們將使用另一個(gè)名為 useMemo 的 hook。

useMemo 只有在依賴關(guān)系發(fā)生變化時(shí)才會(huì)重新計(jì)算記憶化的值。

import React, { useMemo, useEffect, useState } from "react"; 
 
export default function App() { 
  const [count, setCount] = useState(0); 
  const data = useMemo( 
    () => ({ 
      is_fetched: false, 
    }), 
    [] 
  ); // <- dependencies 
  useEffect(() => { 
    setCount(count + 1); 
  }, [data]); 
 
  return ( 
    <div className="App"> 
      <h1>Hello CodeSandbox</h1> 
      <button onClick={() => setCount(count + 1)}>{count}</button> 
      <h2>Start editing to see some magic happen!</h2> 
    </div> 
  ); 
}

錯(cuò)誤的依賴

錯(cuò)誤的依賴關(guān)系與 React 無關(guān)，甚至與 javascript 無關(guān)。當(dāng)使用錯(cuò)誤的依賴關(guān)系時(shí)，我們必須承擔(dān)起責(zé)任。

讓我們看看一下這段代碼

import React, { useEffect, useState } from "react"; 
const App = () => { 
  const [text, setText] = useState(""); 
  useEffect(() => { 
    setText(text); 
  }, [text]); 
  return null; 
}; 
export default App;