大家好，我是 CUGGZ。

發(fā)展壯大離不開(kāi)廣大客戶(hù)長(zhǎng)期以來(lái)的信賴(lài)與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都自上料攪拌車(chē)等，在成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開(kāi)發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。

今天來(lái)分享在 React 開(kāi)發(fā)中常見(jiàn)的一些錯(cuò)誤，以及如何避免這些錯(cuò)誤。理解這些問(wèn)題背后的細(xì)節(jié)，防止犯下類(lèi)似的錯(cuò)誤。

1. 組件卸載后執(zhí)行狀態(tài)更新

 Can’t perform a React state update on an unmounted component

這個(gè)報(bào)錯(cuò)就是因?yàn)樵诮M件樹(shù)的某個(gè)地方，狀態(tài)更新被觸發(fā)到已經(jīng)卸載的組件上了。也就是說(shuō)，我們不能在組件銷(xiāo)毀后更新 state，防止出現(xiàn)內(nèi)存泄漏。

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchAsyncData().then((data) => setData(data));
  }, []);

  
};

比如，在請(qǐng)求數(shù)據(jù)時(shí)，由于跳轉(zhuǎn)到了B頁(yè)面，A頁(yè)面的數(shù)據(jù)請(qǐng)求還在進(jìn)行中，但是頁(yè)面已經(jīng)銷(xiāo)毀了，就會(huì)出現(xiàn)這種情況。那該如何解決這個(gè)問(wèn)題呢？有兩種方法：

（1）組件卸載時(shí)取消異步請(qǐng)求

第一種方法（推薦），就是在組件卸載時(shí)取消異步請(qǐng)求。一些異步請(qǐng)求庫(kù)提供了取消異步請(qǐng)求的方法。如果沒(méi)有使用第三方庫(kù)，可以使用 AbortController 來(lái)取消。這種方法本質(zhì)上就是在組件卸載時(shí)取消副作用：

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal }).then((data) => setData(data));
    return () => {
      controller.abort();
    }
  }, []);

  
};

（2）跟蹤組件是否已掛載

另外，可以跟蹤組件的掛載狀態(tài)，如果還沒(méi)掛載或已經(jīng)卸載，返回 false；否則返回 true：

const Component = () => {
  const [data, setData] = useState(null);
  const isMounted = useRef(true);

  useEffect(() => {
    fetchAsyncData().then(data => {
      if(isMounted.current) {
        setData(data);
      }
    });

    return () => {
      isMounted.current = false;
    };
  }, []);

  
}

不過(guò)，不建議使用這種方法。這樣保留了未掛載組件的引用，可能會(huì)導(dǎo)致內(nèi)存泄漏和性能問(wèn)題。

2. 渲染列表時(shí)不使用 key

 Warning: Each child in a list should have a unique key prop

React 開(kāi)發(fā)中最常見(jiàn)的就是遍歷數(shù)組來(lái)渲染組件。在JSX中，可以使用Array.map將該邏輯嵌入到組件中，并在回調(diào)中返回所需的組件。如下：

import { Card } from "./Card";

const data = [
  { id: 1, text: "JavaScript" },
  { id: 2, text: "TypeScript" },
  { id: 3, text: "React" }
];

export default function App() {
  return (
    

      {data.map((content) => (
        

          
        

      ))}
    

  );
}

這樣會(huì)收到如下警告：Warning: Each child in a list should have a unique key prop?，這表示需要給生成的每個(gè)組件一個(gè)唯一的key。所以，要在map?回調(diào)返回的JSX的最外層元素添加一個(gè)key值，該值應(yīng)該是一個(gè)字符串或者數(shù)字，并且在這個(gè)組件列表中應(yīng)該是唯一的。

export default function App() {
  return (
    

      {data.map((content) => (
        

          
        

      ))}
    

  );
}

盡管不遵守這個(gè)要求也不會(huì)導(dǎo)致應(yīng)用崩潰，但它可能會(huì)導(dǎo)致一些意外的情況。React 會(huì)使用這些key來(lái)確定列表中的哪些子項(xiàng)發(fā)生了更改，并使用此信息來(lái)確定可以重用先前 DOM 的哪些部分，以及在重新渲染組件時(shí)應(yīng)該重新計(jì)算哪些部分。因此，建議添加 key。

3. Hooks 調(diào)用順序錯(cuò)誤

 React Hook "useXXX" is called conditionally. React Hooks must be called in the exact same order in every component render

先來(lái)看下面的代碼：

const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);

  if (isOpen) {
    return 
{}
;
  }
  const openToggle = useCallback(() => setIsOpen(true), []);
  return {/* ... */};
};

當(dāng) isOpen? 的值為true?時(shí)，就會(huì)直接return?那個(gè)div?元素。這樣當(dāng)isOpen?的值為true和false時(shí)useCallback? Hook的調(diào)用順序就不一致了。這時(shí)React就會(huì)警告我們：React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render。這其實(shí)就是React官方文檔中所說(shuō)的，。遵守這條規(guī)則才能確保 Hook 在每一次渲染中都按照同樣的順序被調(diào)用。

可以這樣來(lái)修改上面的代碼：

const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openToggle = useCallback(() => setIsOpen(true), []);

  if (isOpen) {
    return 
{/* ... */}
;
  }
  return {/* ... */};
};

4. useEffect 缺少依賴(lài)

 React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array

先來(lái)看看 React 官網(wǎng)給出的例子：

function Example({ someProp }) {
  function doSomething() {
    console.log(someProp);
  }

  useEffect(() => {
    doSomething();
  }, []); 
}

在useEffect?中定義空的依賴(lài)數(shù)組是不安全，因?yàn)樗{(diào)用的 doSomething? 函數(shù)使用了 someProp?。這時(shí)就會(huì)報(bào)錯(cuò)：React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array?。當(dāng)props?中的someProp?發(fā)生變化時(shí)，函數(shù)doSomething?的結(jié)果就會(huì)發(fā)生變化，然而useEffect的依賴(lài)數(shù)組為空，所以就不會(huì)執(zhí)行回調(diào)中的內(nèi)容。

有兩種方式來(lái)解決這個(gè)問(wèn)題：

• 在useEffect中聲明其所需函數(shù)，這種方式適用于只需要調(diào)用一次的函數(shù)，比如初始化函數(shù)：

function Example({ someProp }) {
  useEffect(() => {
    function doSomething() {
      console.log(someProp);
    } 
    doSomething();
  }, [someProp]); 
}

• 使用useCallback來(lái)定義依賴(lài)項(xiàng)，確保當(dāng)自身依賴(lài)發(fā)生改變時(shí)函數(shù)主體也會(huì)改變：

function Example({ someProp }) {
  const doSomething = useCallback(() => {
    console.log(someProp);
  }, [someProp])

  useEffect(() => {
    doSomething();
  }, [doSomething]); 
}

5. 重新渲染過(guò)多

 Too many re-renders. React limits the number of renders to prevent an infinite loop

這個(gè)報(bào)錯(cuò)就是說(shuō)重新渲染過(guò)多。React 限制渲染的數(shù)量以防止無(wú)限循環(huán)。當(dāng)組件在很短的時(shí)間有太多狀態(tài)更新時(shí)，就可能會(huì)發(fā)生這種情況。導(dǎo)致無(wú)限循環(huán)的最常見(jiàn)原因是：

• 直接在渲染中執(zhí)行狀態(tài)更新；
• 未向事件處理程序提供適當(dāng)?shù)幕卣{(diào)。

如果遇到這個(gè)警告，可以檢查組件的這兩個(gè)方面：

const Component = () => {
  const [count, setCount] = useState(0);

  setCount(count + 1); // 渲染中的狀態(tài)更新

  return (
    

      {/* onClick 沒(méi)有正確的回調(diào) */}
       prevCount + 1)}>
        Increment that counter
      
    

  );
}

6. 渲染的單條數(shù)據(jù)為對(duì)象

 Objects are not valid as a React child / Functions are not valid as a React child

在 React 中，我們可以在組件中渲染到 DOM 中的東西有很多，比如：HTML標(biāo)簽、JSX元素、原始 JavaScript 值、JavaScript 表達(dá)式等。但是不能將對(duì)象和函數(shù)渲染到 DOM 中，因?yàn)檫@兩個(gè)值不會(huì)解析為有意義的值，如果渲染了對(duì)象或函數(shù)，就會(huì)報(bào)上面的錯(cuò)誤。解決這個(gè)問(wèn)題的方法很簡(jiǎn)單，就是檢查渲染的內(nèi)容是否是有效的值：

const Component = ({ body }) => (
  

    
{/* */}

    {/* 必須確保 body 是有效的 React child */}
    
{body}

  

);

7. 相鄰JSX元素沒(méi)有包裝在封閉標(biāo)記中

 Adjacent JSX elements must be wrapped in an enclosing tag

這個(gè)報(bào)錯(cuò)就是說(shuō)相鄰JSX元素必須包裝在封閉標(biāo)記中，也就是必須要有一個(gè)根元素：

const Component = () => (
  
  
);

從 React 開(kāi)發(fā)人員的角度來(lái)看，這個(gè)組件只會(huì)在另一個(gè)組件內(nèi)部使用。因此，在他們的心智模型中，從一個(gè)組件返回兩個(gè)元素是有意義的，因?yàn)樯傻?DOM 結(jié)構(gòu)將是相同的，無(wú)論外部元素是在此組件中定義還是在父組件中定義。但是，React 無(wú)法做出這種假設(shè)。該組件可能會(huì)在根目錄中使用并破壞應(yīng)用，因?yàn)樗鼤?huì)導(dǎo)致無(wú)效的 DOM 結(jié)構(gòu)。

所以，應(yīng)該始終將組件返回的多個(gè) JSX 元素包裝在一個(gè)封閉標(biāo)記中?？梢允且粋€(gè)元素、一個(gè)組件或者 React Fragment：

const Component = () => (
  
    
   
  
);

或者直接使用一個(gè)空標(biāo)簽來(lái)包裝兩個(gè) JSX 元素：

const Component = () => (
  <>
    
   
  
);

8. 使用舊的狀態(tài)

先來(lái)看一個(gè)計(jì)數(shù)器的例子：

const Increaser = () => {
  const [count, setCount] = useState(0);
  
  const increase = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  
  const handleClick = () => {
    increase();
    increase();
    increase();
  };
  
  return (
    <>
      +
      
Counter: {count}

    
  );
}

這里的handleClick?方法會(huì)在點(diǎn)擊按鈕后執(zhí)行三次增加狀態(tài)變量count?的操作。那么點(diǎn)擊一次是否會(huì)增加3呢？事實(shí)并非如此。點(diǎn)擊按鈕之后，count只會(huì)增加1。問(wèn)題就在于，當(dāng)我們點(diǎn)擊按鈕時(shí)，相當(dāng)于下面的操作：

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
};

當(dāng)?shù)谝淮握{(diào)用setCount(count + 1)?時(shí)是沒(méi)有問(wèn)題的，它會(huì)將count?更新為1。接下來(lái)第2、3次調(diào)用setCount?時(shí)，count?還是使用了舊的狀態(tài)（count為0），所以也會(huì)計(jì)算出count為1。發(fā)生這種情況的原因就是狀態(tài)變量會(huì)在下一次渲染才更新。

解決這個(gè)問(wèn)題的辦法就是，使用函數(shù)的方式來(lái)更新?tīng)顟B(tài)：

const Increaser = () => {
  const [count, setCount] = useState(0);
  
  const increase = useCallback(() => {
    setCount(count => count + 1);
  }, [count]);
  
  const handleClick = () => {
    increase();
    increase();
    increase();
  };
  
  return (
    <>
      +
      
Counter: {count}

    
  );
}

這樣改完之后，React就能拿到最新的值，當(dāng)點(diǎn)擊按鈕時(shí)，就會(huì)每次增加3。所以需要記?。?/p>

setValue(prevValue => prevValue + someResult)

網(wǎng)站題目：React中常見(jiàn)的八個(gè)錯(cuò)誤，如何避免？
本文來(lái)源：http://www.dlmjj.cn/article/cccidec.html