Cara Mencegah Pemaparan Semula Komponen Reaksi yang Tidak Diperlukan

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 < count; i++) {
          items.push({
            id: i,
            isSelected: i === count - 1,
          });
        }
        return items;
      }

      return (
        <div className="tutorial">
          <h1>Count: {count}</h1>
          <h1>Selected Item: {selectedItem?.id}</h1>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }

    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} />
        </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!