了解 React 應用程式中的渲染和重新渲染：它們如何運作以及如何優化它們

當我們在 React 中建立應用程式時，我們經常會遇到術語渲染和重新渲染元件。雖然乍看之下這似乎很簡單，但當涉及不同的狀態管理系統（如 useState、Redux）或當我們插入生命週期鉤子（如 useEffect）時，事情就會變得有趣。如果您希望您的應用程式快速且高效，那麼了解這些流程是關鍵。

什麼是渲染？

渲染是 React 根據狀態或屬性在螢幕上顯示使用者介面 (UI) 的過程。當你的元件第一次渲染時，它被稱為第一次渲染。

初始渲染如何運作？

當組件首次「安裝」到 DOM 時，會發生以下情況：

1。狀態初始化：
無論你使用 useState、props 還是 Redux，都會建立元件的初始狀態。

2。渲染函數：
React 循環遍歷 JSX 程式碼並根據當前狀態產生虛擬 DOM。

3。為元件的目前狀態建立一個虛擬 DOM（虛擬 DOM）。

4。比較（差異）：
虛擬 DOM 與真實 DOM 進行比較（由於是第一次渲染，所以所有元素都會完全渲染）。

5。顯示：
此組件顯示在螢幕上。
元件渲染完成後，下一個挑戰就是渲染它。

重新渲染：何時以及為何？

每次狀態或道具改變時都會發生重新渲染。您是否單擊了更改螢幕上數字的按鈕？更改了 Redux 儲存中的值？所有這些操作都可能導致 React 再次渲染元件，這就是重新渲染的用武之地。

重新渲染如何運作？

狀態變化偵測：

• 使用 useState，當你呼叫 setState 時，React 知道它需要更新元件。

• 使用 Redux，當儲存中的值發生變更時，與該狀態部分關聯的每個元件都會重新渲染。

渲染觸發器：

當狀態改變時，React 會根據該變更建立一個新的虛擬 DOM。

比較（差異）：

• React 將新的虛擬 DOM 與舊的虛擬 DOM 進行比較，並計算要套用哪些變更。這是 React 優化渲染的一種方式。

查看更改：

• 計算出變更後，React 將它們套用到實際的 DOM 上。因此，僅再次顯示頁面已變更的部分。

渲染哪些元件？

並非所有元件都會受到每次變更的影響。 React 僅重新渲染那些符合以下條件的元件：

使用當地州：
如果您使用 useState，則每次呼叫 setState.

使用 Redux 狀態：
如果你的元件依賴 Redux 狀態（透過 useSelector 或 connect），當該部分狀態改變時，它將重新渲染。

使用道具：
如果 props 值發生變化，元件將使用新值重新渲染。

渲染優化

當然，不必要地重新渲染所有元件並不總是理想的。如果我們希望應用程式快速且有效率地運行，這裡有一些最佳化技巧：

1。組件記憶
React 透過 React.memo 提供組件記憶功能。如果你的元件不依賴 props 或狀態變化，你可以「記住」它，因此只有當相關值發生變化時它才會重新渲染。

範例：

const MemoizedComponent = React.memo(MyComponent);

2。函數與值的記憶

為了避免在每次渲染時重新建立函數或值，請使用 useCallback 來記憶函數並使用 useMemo 來記憶值。

• useCallback 允許您記住函數並防止在依賴項發生變化之前重新建立它。

• useMemo 會記住函數的結果，因此不會在每次渲染時重新計算。

範例：

const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3。 Redux 最佳化

如果您使用 Redux，您可以使用記憶選擇器（例如重新選擇）進一步優化您的應用程式。這可以避免重新渲染不受狀態變更影響的元件。

Lifecycle Hook-ovi i Rerenderovanje

U klasičnim React klasama, koristili smo shouldComponentUpdate da kontrolišemo kada će se komponenta ponovo renderovati. U funkcionalnim komponentama, ovaj koncept se može simulirati pomoću useEffect i memoizacije.

Zaključak

Renderovanje i rerenderovanje su ključni za prikaz korisničkog interfejsa u React aplikacijama, ali pravilno razumevanje i optimizacija tih procesa može napraviti razliku između spore i super brze aplikacije. Ispravno korišćenje memoizacije, useCallback, useMemo, kao i pažljivo rukovanje Redux-om, pomaže da izbegnemo nepotrebne re-rendere i održimo naše aplikacije brzim i responzivnim.

Primer Koda: Renderovanje i Rerenderovanje u Akciji
Evo primera komponente koja koristi useState, Redux i memoizaciju da optimizuje renderovanje:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={() => dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      </button>
    </div>
  );
};

Kao što vidimo, ovde se koristi kombinacija lokalnog state-a, Redux-a, memoizacije i useEffect hook-a da bi aplikacija bila što efikasnija.

以上是了解 React 應用程式中的渲染和重新渲染：它們如何運作以及如何優化它們的詳細內容。更多資訊請關注PHP中文網其他相關文章！