Memahami Rendering dan Rerendering dalam React Apps: Cara Ia Berfungsi dan Cara Mengoptimumkannya

Apabila kami mencipta aplikasi dalam React, kami sering menjumpai istilah komponen pemaparan dan pemaparan semula. Walaupun ini mungkin kelihatan mudah pada pandangan pertama, perkara menjadi menarik apabila sistem pengurusan negeri yang berbeza seperti useState, Redux, atau apabila kami memasukkan cangkuk kitaran hayat seperti useEffect terlibat. Jika anda mahu aplikasi anda pantas dan cekap, memahami proses ini adalah penting.

Apakah Rendering?

Perenderan ialah proses yang React memaparkan antara muka pengguna (UI) anda pada skrin, berdasarkan keadaan atau prop. Apabila komponen anda dipaparkan buat kali pertama, ia dipanggil paparan pertama.

Bagaimanakah Pemberian Awal Berfungsi?

Apabila komponen mula-mula "dilekapkan" pada DOM, inilah yang berlaku:

1. Permulaan keadaan:
Sama ada anda menggunakan useState, props atau Redux, keadaan awal komponen dibuat.

2. Fungsi render:
Gelung React melalui kod JSX dan menjana DOM maya berdasarkan keadaan semasa.

3. Mencipta DOM maya (DOM Maya) untuk keadaan semasa komponen.

4. Membandingkan (berbeza):
DOM maya dibandingkan dengan DOM sebenar (memandangkan ia adalah pemaparan pertama, semua elemen akan dipaparkan sepenuhnya).

5. Paparan:
Komponen dipaparkan pada skrin.
Sebaik sahaja komponen itu dipaparkan, cabaran seterusnya ialah untuk memaparkannya.

Paparan semula: Bila dan Mengapa?

Perenderan semula berlaku setiap kali keadaan atau prop berubah. Adakah anda mengklik butang yang menukar nombor pada skrin? Menukar nilai dalam kedai Redux? Semua tindakan itu boleh menyebabkan React untuk memaparkan komponen semula, dan di situlah penyampaian semula berlaku.

Bagaimana Rerendering Berfungsi?

Pengesanan perubahan negeri:

• Dengan useState, apabila anda memanggil setState, React tahu ia perlu mengemas kini komponen.

• Dengan Redux, apabila nilai dalam stor berubah, setiap komponen yang dikaitkan dengan bahagian negeri itu dipaparkan semula.

Pencetus Render:

Apabila keadaan berubah, React mencipta DOM maya baharu berdasarkan perubahan itu.

Membanding (membeza):

• React membandingkan DOM maya baharu dengan yang lama dan mengira perubahan yang akan digunakan. Ini adalah salah satu cara React mengoptimumkan pemaparan.

Lihat perubahan:

• Selepas perubahan dikira, React menggunakan perubahan tersebut pada DOM sebenar. Oleh itu, hanya bahagian halaman yang diubah dipaparkan semula.

Komponen Yang Diberikan?

Tidak semua komponen dipengaruhi oleh setiap perubahan. Bertindak balas hanya memaparkan semula komponen yang:

Gunakan negeri setempat:
Jika anda menggunakan useState, komponen dipaparkan semula setiap kali setState.

dipanggil

Gunakan keadaan Redux:
Jika komponen anda bergantung pada keadaan Redux (melalui useSelector atau connect), ia akan dipaparkan semula apabila bahagian keadaan itu berubah.

Gunakan prop:
Jika nilai props berubah, komponen akan dipaparkan semula dengan nilai baharu.

Pengoptimuman Rendering

Sudah tentu, ia tidak selalu sesuai untuk memaparkan semula semua komponen secara sia-sia. Jika kami mahu aplikasi berfungsi dengan cepat dan cekap, berikut ialah beberapa teknik pengoptimuman:

1. Menghafal Komponen
React menawarkan fungsi untuk memoisasi komponen melalui React.memo. Jika komponen anda tidak bergantung pada prop atau perubahan keadaan, anda boleh "mengingat"nya, jadi ia akan dipaparkan semula hanya apabila nilai yang berkaitan berubah.

Contoh:

const MemoizedComponent = React.memo(MyComponent);

2. Penghafalan Fungsi dan Nilai

Untuk mengelak mencipta semula fungsi atau nilai pada setiap paparan, gunakan useCallback untuk menghafal fungsi dan gunakanMemo untuk menghafal nilai.

• useCallback membolehkan anda menghafal fungsi dan menghalangnya daripada dicipta semula sehingga kebergantungan berubah.

• useMemo menghafal hasil fungsi, jadi ia tidak dikira semula pada setiap paparan.

Contoh:

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

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

3. Pengoptimuman Redux

Jika anda menggunakan Redux, anda boleh mengoptimumkan lagi aplikasi anda dengan pemilih yang dihafal seperti pilih semula. Ini membolehkan anda mengelakkan pemaparan semula komponen yang tidak terjejas oleh perubahan keadaan.

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.

Atas ialah kandungan terperinci Memahami Rendering dan Rerendering dalam React Apps: Cara Ia Berfungsi dan Cara Mengoptimumkannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!