調(diào)試 react 代碼

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

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

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

下面的示例顯示了一個錯誤，因為從未調(diào)用過 clearInterval。 嚴(yán)格模式通過運行兩次效果（創(chuàng)建兩個間隔）來幫助捕獲此錯誤。

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

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

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

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

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

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

 React DevTools 組件：突出顯示渲染的組件以識別潛在問題

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

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

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

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

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

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

  return time;
};

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

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

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

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

  // 新增代碼
  useDebugValue(time);

  return time;
};

注意：請謹(jǐn)慎使用 useDebugValue。它最好用于共享庫中的復(fù)雜鉤子，因為了解內(nèi)部狀態(tài)至關(guān)重要。

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

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

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

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

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

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

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

測試 react 代碼

使用 React 測試庫有效地測試你的 React 組件

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

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

React 測試庫：使用測試演練場輕松創(chuàng)建測試用例

難以決定在測試中使用哪些測試用例？

考慮使用測試演練場從組件的 HTML 快速生成測試用例。

以下是兩種使用方法：

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

最新評論