提高程式碼品質和效能的技巧

React 是一個用於建立使用者介面的強大 JavaScript 函式庫，只需一些技巧，您就可以編寫更乾淨、更有效率且可維護的程式碼。在本文中，我們將探討五個基本的 React 技巧，它們將幫助您撰寫效能更高、可讀性更強的程式碼。

---

1.使用三元運算子而不是 AND (&&) 運算子來渲染元素

在 React 中，根據特定條件有條件地渲染元件或元素是很常見的。然而，當計算的表達式產生假值（例如 false、null、undefined、0 或 ''）時，使用 && 運算子進行條件渲染可能會很棘手。為了避免意外的渲染行為，最好使用三元運算子。

&& 行為範例：

在條件渲染中使用 &&：

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

• 第一個範例({0 &&

  Hello world 5

  }) 將在UI 中呈現0，因為0 在JavaScript 中是一個假值，React 會將其解釋為false 。然而，React 不會渲染任何內容，而是渲染假值 (0) 本身。

• 第二個範例 ({0 ?

  Hello world 6

  : null}) 將渲染 無內容。由於條件為 0（為假），因此三元運算子的計算結果將為 null，React 將不會渲染任何內容。

三元運算子的更好方法：

您可以使用三元運算子來確保渲染正確的後備內容，而不是依賴 && 運算符，尤其是當條件為假時。

{0 ? <h1>Hello world 5</h1> : null}

在這種情況下，如果條件為假 (0)，React 將渲染 null，這會導致不渲染任何內容，從而提供更可預測和預期的行為。

---

2.使用 useState 的惰性初始化器

React 的 useState 鉤子可以將函數作為其初始值，讓您延遲初始化狀態。當初始狀態的計算成本很高或它依賴於某些只應運行一次的計算時，這特別有用。

為什麼要使用延遲初始化？

• 效能改進：如果初始狀態涉及昂貴的計算或資料獲取，延遲初始化有助於推遲該成本，直到實際需要為止。
• 避免不必要的計算：你傳遞給useState作為初始值的函數只會在元件掛載期間執行一次，並且在後續渲染時不會重新計算。

範例：

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

在此範例中：

• useState(() => Math.random()) 只會在初始渲染時呼叫該函數一次。
• 這可確保隨機數產生僅發生一次，從而在計算成本較高的情況下提高效能。

---

3.使用延遲載入元件來提升效能

React 的 React.lazy() 和 Suspense 是延遲載入元件的絕佳工具，它有助於將 JavaScript 分成更小的套件，並僅在需要時載入它們。這顯著減少了初始載入時間並提高了應用程式的效能。

範例：

{0 ? <h1>Hello world 5</h1> : null}

在此範例中：

• React.lazy() 讓您動態匯入 LazyComponent。
• Suspense 元件用於顯示載入狀態，直到延遲載入的元件完全渲染。

透過使用延遲加載，您的應用程式將僅加載初始渲染所需的元件，並按需獲取其他元件，從而提高效能，尤其是在大型應用程式中。

---

4.在 JavaScript 中使用可選鏈

如果您使用 JavaScript，在存取物件上的深層巢狀屬性時，可選連結 (?.) 是救星。它可以防止嘗試存取未定義或 null 的屬性時發生的錯誤。可選鏈在現代 JavaScript 中可用，允許您安全地存取屬性，而無需手動檢查 null 或未定義。

範例：

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

在此範例中：

• 如果 data 或 info 未定義或為 null，data?.info?.address 可以安全地存取位址屬性，而不會引發錯誤。
• ??如果位址未定義，運算子提供預設值。

如果沒有可選鏈接，您需要手動檢查每個級別，這很快就會導致程式碼混亂且難以閱讀。可選的連結使其保持乾淨且無錯誤。

---

5.對表單使用 useRef 以避免重新渲染

在 React 中，當使用表單且不需要元件在每次輸入變更時重新渲染時，最好使用 useRef 而不是 useState。 useRef 直接儲存輸入欄位的值，當值變更時不會觸發重新渲染，使其對於大型表單的效能更高。

範例：

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

在此 TypeScript 範例中：

• useRef 用於追蹤輸入值，而不會導致元件在每次輸入變更時重新渲染。
• nameRef.current 用於在提交表單時直接存取輸入的值。

當表單值不需要觸發重新渲染以進行驗證或動態更新時，使用 useRef 特別有用，使其成為效能敏感表單的絕佳選擇。

---

結論

透過在程式碼中應用這五個 React 技巧，您可以顯著提高效能、可讀性和可維護性。快速回顧一下：

1. 使用三元運算子進行條件渲染，而不是 &&。
2. 利用 useState 中的延遲初始化。
3. 對元件實作延遲載入以縮短初始載入時間。
4. 使用可選鏈在 JavaScript 中實現更安全的屬性存取。
5. 在表單中使用 useRef 以避免不必要的重新渲染。

透過這些技術，您的 React 應用程式將更加高效且更易於維護，從而帶來更好的使用者體驗和更順暢的開發。快樂編碼！

以上是提高程式碼品質和效能的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！