cari
Rumahhujung hadapan webtutorial jsCara Mencegah Pemaparan Semula Komponen Reaksi yang Tidak Diperlukan

How to Prevent Unnecessary React Component Re-Rendering

Memahami cara React Native menghasilkan komponen adalah penting untuk membina aplikasi yang cekap dan berprestasi. Apabila keadaan komponen atau prop berubah, React secara automatik mengemas kini Antara Muka Pengguna(UI) untuk mencerminkan perubahan tersebut. Akibatnya, React memanggil kaedah pemaparan komponen sekali lagi untuk menjana perwakilan UI yang dikemas kini.

Dalam artikel ini, kami akan meneroka tiga React Hooks dan cara ia menghalang rendering yang tidak perlu dalam React

  • useMemo
  • gunakan Panggilan Balik
  • useRef

Alat ini membolehkan kami mengoptimumkan kod kami dengan mengelakkan pemaparan semula yang tidak perlu, meningkatkan prestasi dan menyimpan nilai dengan cekap.

Menjelang akhir artikel ini, kami akan lebih memahami cara menjadikan aplikasi React kami lebih pantas dan lebih responsif menggunakan cangkuk React yang berguna ini.

Menggunakan useMemo React

Dalam React, useMemo boleh menghalang pemaparan semula yang tidak perlu dan mengoptimumkan prestasi.

Mari kita terokai bagaimana cangkuk useMemo boleh menghalang pemaparan semula yang tidak perlu dalam komponen React kami.

Dengan menghafal hasil fungsi dan menjejak kebergantungannya, useMemo memastikan proses itu dikira semula hanya apabila perlu.

Pertimbangkan contoh berikut:

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;

Kod di atas ialah komponen React yang dipanggil Halaman yang menggunakan useMemo untuk mengoptimumkan pengiraan Item yang dipilih.

Ini penjelasannya:

  • Komponen mengekalkan kiraan pembolehubah keadaan menggunakan cangkuk useState.
  • Keadaan item dimulakan menggunakan cangkuk useState dengan hasil fungsi generateItems.
  • Item yang dipilih dikira menggunakan useMemo, yang menghafal hasil operasi item.cari. Ia hanya mengira semula apabila sama ada kiraan atau item berubah.
  • Fungsi generateItems menjana tatasusunan item berdasarkan kiraan yang diberikan.
  • Komponen memaparkan nilai kira semasa, idItem yang dipilih dan butang untuk menambah kiraan.

Menggunakan useMemo mengoptimumkan prestasi dengan menghafal hasil operasi item.cari. Ia memastikan bahawa pengiraan Item terpilih hanya dilakukan apabila kebergantungan (kiraan atau item) berubah, menghalang pengiraan semula yang tidak perlu pada pemaparan berikutnya.

Hafalan harus digunakan secara terpilih untuk operasi intensif pengiraan, kerana ia memperkenalkan overhed tambahan kepada proses pemaparan.

Menggunakan useCallback React

Kait useCallback dalam React membenarkan penghafalan fungsi, menghalangnya daripada dicipta semula semasa setiap pemaparan komponen. Dengan menggunakan useCallback. sesuatu bahagian dibuat sekali sahaja dan digunakan semula dalam pemaparan berikutnya selagi kebergantungannya kekal tidak berubah.

Pertimbangkan contoh berikut:

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;

Kod di atas menunjukkan fungsi penapisan warna dan kocok yang ringkas dalam komponen React. Jom ikuti langkah demi langkah:

  • Susun atur warna awal ditakrifkan sebagai semuaWarna.
  • Fungsi shuffle mengambil tatasusunan dan mengocok elemennya secara rawak. Ia menggunakan algoritma Fisher-Yates untuk mencapai shuffling.
  • Komponen Penapis ialah komponen fungsian yang dihafal yang menghasilkan elemen input. Ia menerima prop onChange dan mencetuskan fungsi panggil balik apabila nilai input berubah.
  • Komponen Halaman ialah komponen utama yang menjadikan fungsi penapisan dan shuffling warna.
  • Warna pembolehubah keadaan dimulakan menggunakan cangkuk useState, dengan nilai awal ditetapkan kepada semuaWarna. Ia mewakili senarai warna yang ditapis.
  • Fungsi handleFilter dicipta menggunakan cangkuk useCallback. Ia memerlukan parameter teks dan menapis tatasusunan allColors berdasarkan teks yang disediakan. Warna yang ditapis kemudiannya ditetapkan menggunakan fungsi setColors daripada cangkuk useState. Tatasusunan kebergantungan [warna] memastikan bahawa fungsi Penapis pemegang hanya dicipta semula jika keadaan warna berubah, mengoptimumkan prestasi dengan menghalang pemaparan semula yang tidak perlu.
  • Di dalam komponen Halaman terdapat butang untuk merombak warna. Apabila butang diklik, ia memanggil fungsi setColors dengan tatasusunan kocok semuaColors.
  • Komponen Penapis diberikan dengan set onChange prop pada fungsi handleFilter.
  • Akhir sekali, tatasusunan warna dipetakan untuk menjadikan senarai item warna sebagai
  • elemen.

Cakuk useCallback digunakan untuk menghafal fungsi handleFilter, yang bermaksud fungsi itu hanya dicipta sekali dan digunakan semula pada pemaparan berikutnya jika kebergantungan (dalam kes ini, keadaan warna) kekal sama.

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.

Atas ialah kandungan terperinci Cara Mencegah Pemaparan Semula Komponen Reaksi yang Tidak Diperlukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanPython vs JavaScript: Keluk Pembelajaran dan Kemudahan PenggunaanApr 16, 2025 am 12:12 AM

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Python vs JavaScript: Komuniti, Perpustakaan, dan SumberPython vs JavaScript: Komuniti, Perpustakaan, dan SumberApr 15, 2025 am 12:16 AM

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Dari C/C ke JavaScript: Bagaimana semuanya berfungsiDari C/C ke JavaScript: Bagaimana semuanya berfungsiApr 14, 2025 am 12:05 AM

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Enjin JavaScript: Membandingkan PelaksanaanEnjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataBeyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AM

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

JavaScript: meneroka serba boleh bahasa webJavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AM

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa