怎么解決React.useEffect()的無限循環

這篇文章主要講解了“怎么解決React.useEffect()的無限循環”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么解決React.useEffect()的無限循環”吧！

1. 無限循環和副作用更新狀態

假設我們有一個功能組件，該組件里面有一個 input 元素，組件是功能是計算 input 更改的次數。

我們給這個組件取名為 CountInputChanges，大概的內容如下：

function CountInputChanges() {   const [value, setValue] = useState('');   const [count, setCount] = useState(-1);   useEffect(() => setCount(count + 1));   const onChange = ({ target }) => setValue(target.value);    return (     <div>  <input type="text" value={value} onChange={onChange} />  <div>Number of changes: {count}</div>  </div>   ) }

<input type =“ text” value = {value} onChange = {onChange} />是受控組件。value變量保存著 input  輸入的值，當用戶輸入輸入時，onChange事件處理程序更新 value 狀態。

這里使用useEffect()更新count變量。每次由于用戶輸入而導致組件重新渲染時，useEffect(() => setCount(count  + 1))就會更新計數器。

因為useEffect(() => setCount(count + 1))是在沒有依賴參數的情況下使用的，所以()=>  setCount(count + 1)會在每次渲染組件后執行回調。

你覺得這樣寫會有問題嗎?打開演示自己試試看：https://codesandbox.io/s/infinite-loop-9rb8c?file=/src/App.js

運行了會發現count狀態變量不受控制地增加，即使沒有在input中輸入任何東西，這是一個無限循環。

問題在于useEffect()的使用方式：

useEffect(() => setCount(count + 1));

它生成一個無限循環的組件重新渲染。

在初始渲染之后，useEffect()執行更新狀態的副作用回調函數。狀態更新觸發重新渲染。重新渲染之后，useEffect()執行副作用回調并再次更新狀態，這將再次觸發重新渲染。

1.1通過依賴來解決

無限循環可以通過正確管理useEffect(callback, dependencies)依賴項參數來修復。

因為我們希望count在值更改時增加，所以可以簡單地將value作為副作用的依賴項。

import { useEffect, useState } from 'react';  function CountInputChanges() {   const [value, setValue] = useState('');   const [count, setCount] = useState(-1);   useEffect(() => setCount(count + 1), [value]);   const onChange = ({ target }) => setValue(target.value);    return (     <div>  <input type="text" value={value} onChange={onChange} />  <div>Number of changes: {count}</div>  </div>   ); }

添加[value]作為useEffect的依賴，這樣只有當[value]發生變化時，計數狀態變量才會更新。這樣做可以解決無限循環。

1.2 使用 ref

除了依賴，我們還可以通過 useRef() 來解決這個問題。

其思想是更新 Ref 不會觸發組件的重新渲染。

import { useEffect, useState, useRef } from "react";  function CountInputChanges() {   const [value, setValue] = useState("");   const countRef = useRef(0);   useEffect(() => countRef.current++);   const onChange = ({ target }) => setValue(target.value);    return (     <div>  <input type="text" value={value} onChange={onChange} />  <div>Number of changes: {countRef.current}</div>  </div>   ); }

useEffect(() => countRef.current++)  每次由于value的變化而重新渲染后，countRef.current++就會返回。引用更改本身不會觸發組件重新渲染。

2. 無限循環和新對象引用

即使正確設置了useEffect()依賴關系，使用對象作為依賴關系時也要小心。

例如，下面的組件CountSecrets監聽用戶在input中輸入的單詞，一旦用戶輸入特殊單詞'secret'，統計 'secret' 的次數就會加  1。

import { useEffect, useState } from "react";  function CountSecrets() {   const [secret, setSecret] = useState({ value: "", countSecrets: 0 });    useEffect(() => {     if (secret.value === 'secret') {  setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));    }  }, [secret]);   const onChange = ({ target }) => {     setSecret(s => ({ ...s, value: target.value }));   };    return (     <div>  <input type="text" value={secret.value} onChange={onChange} />  <div>Number of secrets: {secret.countSecrets}</div>  </div>   ); }

打開演示(https://codesandbox.io/s/infinite-loop-obj-dependency-7t26v?file=/src/App.js)自己試試，當前輸入  secret，secret.countSecrets的值就開始不受控制地增長。

這是一個無限循環問題。

為什么會這樣?

secret對象被用作useEffect(..., [secret])。在副作用回調函數中，只要輸入值等于secret，就會調用更新函數

setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));

這會增加countSecrets的值，但也會創建一個新對象。

secret現在是一個新對象，依賴關系也發生了變化。所以useEffect(...,  [secret])再次調用更新狀態和再次創建新的secret對象的副作用，以此類推。

JavaScript 中的兩個對象只有在引用完全相同的對象時才相等。

2.1 避免將對象作為依賴項

解決由循環創建新對象而產生的無限循環問題的最好方法是避免在useEffect()的dependencies參數中使用對象引用。

let count = 0; 
 
useEffect(() => { 
  // some logic 
}, [count]); // Good! 

let myObject = {   prop: 'Value' };  useEffect(() => {   // some logic }, [myObject]); // Not good! useEffect(() => {   // some logic }, [myObject.prop]); // Good!

修復組件的無限循環問題，可以將useEffect(..., [secret])) 變為 useEffect(...,  [secret.value])。

僅在secret.value更改時調用副作用回調就足夠了，下面是修復后的代碼：

import { useEffect, useState } from "react";  function CountSecrets() {   const [secret, setSecret] = useState({ value: "", countSecrets: 0 });    useEffect(() => {     if (secret.value === 'secret') {       setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));     }  }, [secret.value]);   const onChange = ({ target }) => {     setSecret(s => ({ ...s, value: target.value }));   };    return (     <div>  <input type="text" value={secret.value} onChange={onChange} />  <div>Number of secrets: {secret.countSecrets}</div>  </div>   ); }

 3 總結

useEffect(callback, deps)是在組件渲染后執行callback(副作用)的  Hook。如果不注意副作用的作用，可能會觸發組件渲染的無限循環。

生成無限循環的常見情況是在副作用中更新狀態，沒有指定任何依賴參數

useEffect(() => {   // Infinite loop!   setState(count + 1); });

避免無限循環的一種有效方法是正確設置依賴項：

useEffect(() => {   // No infinite loop   setState(count + 1); }, [whenToUpdateValue]);

另外，也可以使用 Ref，更新 Ref 不會觸發重新渲染：

useEffect(() => {   // No infinite loop   countRef.current++; });

無限循環的另一種常見方法是使用對象作為useEffect()的依賴項，并在副作用中更新該對象(有效地創建一個新對象)

useEffect(() => {   // Infinite loop!   setObject({     ...object,     prop: 'newValue'   }) }, [object]);

避免使用對象作為依賴項，只使用特定的屬性(最終結果應該是一個原始值)：

useEffect(() => {   // No infinite loop   setObject({     ...object,     prop: 'newValue'   }) }, [object.whenToUpdateProp]);

當使用useEffect()時，你還知道有其它方式會引起無限循環陷阱嗎?

感謝各位的閱讀，以上就是“怎么解決React.useEffect()的無限循環”的內容了，經過本文的學習后，相信大家對怎么解決React.useEffect()的無限循環這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！