調(diào)試 react 代碼

在將組件部署到生產(chǎn)環(huán)境之前，使用 StrictMode 捕獲組件中的錯(cuò)誤

使用嚴(yán)格模式是一種在開發(fā)過(guò)程中檢測(cè)應(yīng)用程序中潛在問(wèn)題的主動(dòng)方法。它有助于識(shí)別以下問(wèn)題：

• 效果中的清理不完整，例如忘記釋放資源。
• React 組件中的雜質(zhì)，確保它們?cè)诮o定相同輸入（props、state 和 context）的情況下返回一致的 JSX。

下面的示例顯示了一個(gè)錯(cuò)誤，因?yàn)閺奈凑{(diào)用過(guò) clearInterval。 嚴(yán)格模式通過(guò)運(yùn)行兩次效果（創(chuàng)建兩個(gè)間隔）來(lái)幫助捕獲此錯(cuò)誤。

export default function App() {
  const [time, setTime] = useState<Date>(new Date());
  const handleTimeChange = useCallback((newTime: Date) => {
    // 這將被記錄兩次，因?yàn)?`useEffect`
    // 使用 `StrictMode` 運(yùn)行兩次，并且我們從未清除定時(shí)器
    console.log("這是當(dāng)前時(shí)間", newTime);
    setTime(newTime);
  }, []);

  useEffect(() => {
    const intervalId = setInterval(() => {
      handleTimeChange(new Date());
    }, 1_000);n
    // 取消注釋下面這行代碼來(lái)修復(fù)錯(cuò)誤
    // return () => clearInterval(intervalId);
  }, [handleTimeChange]);

  return (
    <div className="App">
      <h1>當(dāng)前時(shí)間: {time.toLocaleTimeString()}</h1>
    </div>
  );
}

安裝 React Developer Tools 瀏覽器擴(kuò)展來(lái)查看/編輯你的組件并檢測(cè)性能問(wèn)題

React Developer Tools 是一款必備擴(kuò)展程序（Chrome、Firefox）。此擴(kuò)展程序可讓你：

• 可視化并深入研究 React 組件的細(xì)節(jié)，檢查從 props 到狀態(tài)的所有內(nèi)容。
• 直接修改組件的狀態(tài)或 props，以查看更改如何影響行為和渲染。
• 分析你的應(yīng)用程序以確定組件重新渲染的時(shí)間和原因，幫助你發(fā)現(xiàn)性能問(wèn)題。
• 等等。

 React DevTools 組件：突出顯示渲染的組件以識(shí)別潛在問(wèn)題

如果你的應(yīng)用存在性能問(wèn)題時(shí)，都可以使用這個(gè)技巧。你可以突出顯示渲染的組件(高亮顯示)以檢測(cè)潛在問(wèn)題（例如，渲染次數(shù)過(guò)多）。

在自定義 hooks 中利用 useDebugValue 可以在 React DevTools 中獲得更好的可視性

useDebugValue 可以成為一種便捷的工具，用于在 React DevTools 中為自定義鉤子添加描述性標(biāo)簽。這使得直接從 DevTools 界面監(jiān)視它們的狀態(tài)變得更加容易。

例如，考慮一下我用來(lái)獲取和顯示當(dāng)前時(shí)間的這個(gè)自定義鉤子，每秒更新一次：

const useCurrentTime = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(intervalId);
  }, [setTime]);

  return time;
};

不好的做法：如果沒有 useDebugValue，實(shí)際時(shí)間值不會(huì)立即可見；你需要擴(kuò)展 CurrentTime 鉤子：

推薦做法：使用 useDebugValue 可以很容易地看到當(dāng)前時(shí)間：

const useCurrentTime = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(intervalId);
  }, [setTime]);

  // 新增代碼
  useDebugValue(time);

  return time;
};

注意：請(qǐng)謹(jǐn)慎使用 useDebugValue。它最好用于共享庫(kù)中的復(fù)雜鉤子，因?yàn)榱私鈨?nèi)部狀態(tài)至關(guān)重要。

使用 why-did-you-render 等相關(guān)庫(kù)來(lái)跟蹤組件渲染并識(shí)別潛在的性能瓶頸

有時(shí)，組件會(huì)重新渲染，但無(wú)法立即查明原因。雖然 React DevTools 很有用，但在大型應(yīng)用中，它可能只會(huì)提供模糊的解釋，例如“hook #1 已渲染”，這可能是無(wú)用的。

在這種情況下，你可以求助于 why-did-you-render 庫(kù)。它提供了有關(guān)組件重新渲染原因的更詳細(xì)見解，有助于更有效地查明性能問(wèn)題。來(lái)看以下一個(gè)示例,多虧了這個(gè)庫(kù)，我們可以找到 FollowersList 組件的問(wèn)題。

在嚴(yán)格模式下第二次渲染時(shí)隱藏日志

StrictMode 有助于在應(yīng)用程序開發(fā)早期發(fā)現(xiàn)錯(cuò)誤。

但是，由于它會(huì)導(dǎo)致組件渲染兩次，因此可能會(huì)導(dǎo)致重復(fù)的日志，從而使控制臺(tái)變得混亂。

你可以在 Strict Mode 的第二次渲染期間隱藏日志以解決此問(wèn)題,勾選hide logs....選項(xiàng)即可。如下圖所示:

測(cè)試 react 代碼

使用 React 測(cè)試庫(kù)有效地測(cè)試你的 React 組件

想要測(cè)試你的 React 應(yīng)用嗎？請(qǐng)務(wù)必使用 @testing-library/react。

你可以在此處找到一個(gè)最基本的示例。

React 測(cè)試庫(kù)：使用測(cè)試演練場(chǎng)輕松創(chuàng)建測(cè)試用例

難以決定在測(cè)試中使用哪些測(cè)試用例？

考慮使用測(cè)試演練場(chǎng)從組件的 HTML 快速生成測(cè)試用例。

以下是兩種使用方法：

方法 1：在測(cè)試中使用 screen.logTestingPlaygroundURL()。此函數(shù)生成一個(gè) URL，打開測(cè)試環(huán)境工具，其中已加載組件的 HTML。

方法 2：安裝 Testing Playground Chrome 擴(kuò)展程序。此擴(kuò)展程序允許你直接在瀏覽器中將鼠標(biāo)懸停在應(yīng)用中的元素上，以找到測(cè)試它們的最佳查詢。

使用 Cypress 或 Playwright 進(jìn)行端到端測(cè)試

需要進(jìn)行端到端測(cè)試嗎？

請(qǐng)務(wù)必查看 Cypress 或 Playwright。

使用 MSW 在測(cè)試中模擬網(wǎng)絡(luò)請(qǐng)求

有時(shí)，你的測(cè)試需要發(fā)出網(wǎng)絡(luò)請(qǐng)求。

與其實(shí)現(xiàn)自己的模擬（或者，但愿不會(huì)發(fā)出實(shí)際的網(wǎng)絡(luò)請(qǐng)求），不如考慮使用 MSW（Mock Service Worker）來(lái)處理你的 API 響應(yīng)。

MSW 允許你直接在測(cè)試中攔截和操縱網(wǎng)絡(luò)交互，為模擬服務(wù)器響應(yīng)提供了一種強(qiáng)大而直接的解決方案，而不會(huì)影響實(shí)時(shí)服務(wù)器。

這種方法有助于維護(hù)受控且可預(yù)測(cè)的測(cè)試環(huán)境，從而提高測(cè)試的可靠性。

總結(jié)

在開發(fā)React應(yīng)用時(shí),使用嚴(yán)格模式StrictMode可以幫助開發(fā)者捕捉到組件中的錯(cuò)誤和潛在問(wèn)題,如資源未正確釋放或組件純度問(wèn)題,安裝React Developer Tools瀏覽器擴(kuò)展可以深入檢查組件的props和狀態(tài),直接修改它們以及分析性能問(wèn)題,此外,使用useDebugValue可以為自定義hooks在React DevTools中添加描述性標(biāo)簽,提高可視化監(jiān)控的便利性,為了進(jìn)一步追蹤組件的渲染性能和識(shí)別性能瓶頸,可以利用why-did-you-render庫(kù),在進(jìn)行測(cè)試時(shí),@testing-library/react和Cypress或Playwright等工具可以有效地測(cè)試React組件和執(zhí)行端到端測(cè)試,另外,使用MockServiceWorker（MSW）模擬網(wǎng)絡(luò)請(qǐng)求,保持測(cè)試環(huán)境的可控性和預(yù)測(cè)性。

到此這篇關(guān)于react調(diào)試和測(cè)試代碼的小技巧的文章就介紹到這了,更多相關(guān)react調(diào)試和測(cè)試代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論