搜尋
首頁web前端js教程如何防止不必要的 React 元件重新渲染

How to Prevent Unnecessary React Component Re-Rendering

了解 React Native 如何渲染元件對於建立高效且高效能的應用程式至關重要。當元件的狀態或屬性變更時,React 會自動更新使用者介面(UI)以反映這些變更。結果,React 再次呼叫元件的 render 方法來產生更新的 UI 表示。

在本文中,我們將探討三個 React Hook 以及它們如何防止 React 中不必要的渲染

  • 使用備忘錄
  • useCallback
  • useRef

這些工具使我們能夠透過避免不必要的重新渲染、提高效能和有效儲存值來最佳化程式碼。

在本文結束時,我們將更了解如何使用這些方便的 React hook 讓我們的 React 應用程式更快、更快回應。

使用 React 的 useMemo

在 React 中,useMemo 可以防止不必要的重新渲染並最佳化效能。

讓我們來探索一下 useMemo 鉤子如何防止 React 元件中不必要的重新渲染。

透過記住函數的結果並追蹤其依賴關係,useMemo 確保僅在必要時重新計算該過程。

考慮以下範例:

import { useMemo, useState } from 'react';

    function Page() {
      const [count, setCount] = useState(0);
      const [items] = useState(generateItems(300));

      const selectedItem = useMemo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateItems(count) {
        const items = [];
        for (let i = 0; i 
          <h1 id="Count-count">Count: {count}</h1>
          <h1 id="Selected-Item-selectedItem-id">Selected Item: {selectedItem?.id}</h1>
          <button onclick="{()"> setCount(count + 1)}>Increment</button>
        
      );
    }

    export default Page;

上面的程式碼是一個名為Page的React元件,它使用useMemo來最佳化selectedItem計算。

解釋如下:

  • 元件使用 useState 掛鉤維護狀態變數計數。
  • 項目狀態是使用 useState 鉤子和generateItems函數的結果來初始化的。
  • selectedItem是使用useMemo計算的,它會記住items.find運算的結果。僅當計數或項目發生變化時才會重新計算。
  • generateItems 函數根據給定的計數產生項目數組。
  • 此元件呈現目前 count 值、selectedItem id 以及用於增加計數的按鈕。

使用 useMemo 透過記住 items.find 操作的結果來最佳化效能。它確保僅在依賴項(計數或項目)變更時才執行 selectedItem 的計算,從而防止後續渲染時不必要的重新計算。

應有選擇地對計算密集型操作採用記憶化,因為它會為渲染過程帶來額外的開銷。

使用React的useCallback

React 中的 useCallback 鉤子允許記憶函數,防止它們在每個元件渲染期間被重新建立。透過利用 useCallback。只要其依賴項保持不變,部件僅建立一次並在後續渲染中重複使用。

考慮以下範例:

import React, { useState, useCallback, memo } from 'react';

    const allColors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    };

    const Filter = memo(({ onChange }) => {
      console.log('Filter rendered!');

      return (
        <input type="text" placeholder="Filter colors..." onchange="{(e)"> onChange(e.target.value)}
        />
      );
    });

    function Page() {
      const [colors, setColors] = useState(allColors);
      console.log(colors[0])

      const handleFilter = useCallback((text) => {
        const filteredColors = allColors.filter((color) =>
          color.includes(text.toLowerCase())
        );
        setColors(filteredColors);
      }, [colors]);


      return (
        <div classname="tutorial">
        <div classname="align-center mb-2 flex">
          <button onclick="{()"> setColors(shuffle(allColors))}>
            Shuffle
          </button>
          <filter onchange="{handleFilter}"></filter>
        </div>
        <ul>
          {colors.map((color) => (
            <li key="{color}">{color}</li>
          ))}
        </ul>
      </div>
      );
    }

    export default Page;

上面的程式碼示範了 React 元件中的簡單顏色過濾和洗牌功能。讓我們一步一步來:

  • 初始顏色陣列定義為 allColors。
  • shuffle 函數接受一個陣列並隨機打亂其元素。它使用Fisher-Yates演算法來實現洗牌。
  • Filter 元件是一個渲染輸入元素的記憶化功能元件。它接收 onChange 屬性並在輸入值發生變化時觸發回調函數。
  • Page 元件是渲染顏色過濾和洗牌功能的主要元件。
  • 狀態變數顏色使用 useState 鉤子進行初始化,初始值設定為 allColors。它代表過濾後的顏色列表。
  • handleFilter 函數是使用 useCallback 掛鉤建立的。它採用文字參數並根據提供的文字過濾 allColors 陣列。然後使用 useState 掛鉤中的 setColors 函數設定過濾後的顏色。依賴陣列 [colors] 確保僅在顏色狀態變更時重新建立 handleFilter 函數,透過防止不必要的重新渲染來最佳化效能。
  • 頁面元件內部有一個用來調整顏色的按鈕。當您按一下按鈕時,它會使用經過排序的 allColors 陣列來呼叫 setColors 函數。
  • Filter 元件是透過將 onChange 屬性設為handleFilter 函數來渲染的。
  • 最後,顏色數組被映射以將顏色項目列表渲染為
  • 元素。

useCallback 鉤子用於記憶handleFilter 函數,這表示函數只建立一次,並且如果相依性(在本例中為顏色狀態)保持不變,則在後續渲染中重複使用。

This optimization prevents unnecessary re-renders of child components that receive the handleFilter function as a prop, such as the Filter component.
It ensures that the Filter component is not re-rendered if the colors state hasn't changed, improving performance.

Using React's useRef

Another approach to enhance performance in React applications and avoid unnecessary re-renders is using the useRef hook. Using useRef, we can store a mutable value that persists across renders, effectively preventing unnecessary re-renders.

This technique allows us to maintain a reference to a value without triggering component updates when that value changes. By leveraging the mutability of the reference, we can optimize performance in specific scenarios.

Consider the following example:

import React, { useRef, useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" value="{name}" onchange="{(e)"> setName(e.target.value)}
        ref={inputRef}
      />
      <button onclick="{handleClick}">Focus</button>
    </div>
  );
}

The example above has a simple input field and a button. The useRef hook creates a ref called inputRef. As soon as the button is clicked, the handleClick function is called, which focuses on the input element by accessing the current property of the inputRef ref object. As such, it prevents unnecessary rerendering of the component when the input value changes.

To ensure optimal use of useRef, reserve it solely for mutable values that do not impact the component's rendering. If a mutable value influences the component's rendering, it should be stored within its state instead.

Conclusion

Throughout this tutorial, we explored the concept of React re-rendering and its potential impact on the performance of our applications. We delved into the optimization techniques that can help mitigate unnecessary re-renders. React offers a variety of hooks that enable us to enhance the performance of our applications. We can effectively store values and functions between renders by leveraging these hooks, significantly boosting React application performance.

以上是如何防止不必要的 React 元件重新渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),