React Persediaan Temuduga

1. Apakah Perbezaan antara useState & useRef ?

Jawapan:-

• useState digunakan untuk mengisytiharkan pembolehubah keadaan dalam komponen berfungsi. Apabila keadaan berubah, komponen akan dipaparkan semula.

• useRef, sebaliknya, mengembalikan objek ref boleh ubah yang sifatnya .semasa dimulakan dengan hujah yang diluluskan (Nilai awal).

• Objek yang dikembalikan akan kekal sepanjang hayat komponen sepenuhnya.

• Kes penggunaan biasa untuk useRef adalah untuk mengakses sifat komponen kanak-kanak secara penting. Adalah penting untuk ambil perhatian bahawa perubahan pada sifat .current ref tidak menyebabkan komponen itu dipaparkan semula.

2. Apakah portal dalam React?

• Katakan dalam beberapa senario kita perlu memaparkan komponen di luar nod DOM akar, Di sini kita boleh menggunakan portal.

• Kami boleh menggunakannya untuk Modal / beberapa komponen Pop timbul.

3. Mengapakah kita memerlukan komponen super dalam kelas ?

Jawapan:-

• Pembina kelas kanak-kanak tidak boleh menggunakan rujukan ini sehingga super() telah dipanggil.

• Jika anda tidak memanggil super(), JavaScript akan membuang ralat kerana ini tidak dimulakan. Ini kerana ini dalam konteks kelas kanak-kanak tidak dimulakan sehingga super() dipanggil.
  

class Parent {
  constructor() {
    this.name = 'Parent';
  }
}

class Child extends Parent {
  constructor() {
    super(); // Must call super() here
    this.name = 'Child';
  }
}

4. useCallback vs useMemo vs React.memo

Jawapan:-

• useCallback ialah cangkuk yang akan mengembalikan versi ingatan bagi fungsi panggil balik yang hanya berubah jika salah satu kebergantungan telah berubah.
• Ia berguna apabila menghantar panggilan balik kepada komponen anak yang dioptimumkan yang bergantung pada kesamaan rujukan untuk mengelakkan pemaparan yang tidak perlu.

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

function Example() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

• useMemo ialah cangkuk yang akan mengembalikan nilai ingatan, yang hanya mengira semula jika salah satu kebergantungan telah berubah. Ia berguna untuk pengiraan yang mahal.

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

function Example() {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => {
    // Perform expensive calculation here
    return computeExpensiveValue(count);
  }, [count]);

  return (
    <div>
      <p>Expensive value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• React.memo ialah komponen tertib lebih tinggi yang menghafal hasil komponen fungsi dan menjadikannya hanya apabila prop berubah.
• Ia berguna untuk mengelakkan pemaparan yang tidak diperlukan untuk komponen yang menghasilkan hasil yang sama diberikan prop yang sama.

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // render logic here
});

export default MyComponent;

NOTA:-
useCallback digunakan untuk menghafal fungsi, useMemo digunakan untuk menghafal nilai dan React.memo digunakan untuk menghafal komponen.

5. Apakah yang akan berlaku jika kita terlalu menggunakan fungsiMemo, Memo dan useCallback di atas?

Penggunaan Memori:

• Melalui penggunaan React.memo boleh meningkatkan penggunaan memori aplikasi anda, kerana ia menyimpan versi komponen sebelumnya dalam memori.

Isu Prestasi:

• Walaupun cangkuk dan React.memo ini bertujuan untuk mengoptimumkan prestasi, penggunaan berlebihan sebenarnya boleh mendatangkan kesan sebaliknya.

• Sebagai contoh, useMemo dan useCallback mempunyai kos, dan jika pengiraan yang mereka halang tidak lebih mahal daripada kos penggunaan cangkuk, anda boleh berakhir dengan prestasi yang lebih perlahan.

6. Apakah perbezaan antara komponen tindak balas vs unsur tindak balas ?

Jawapan:-

Komponen Reaksi:

• Komponen React ialah fungsi atau kelas yang menerima input secara pilihan dan mengembalikan elemen React. Komponen boleh digunakan semula dan juga boleh mengekalkan keadaan persendirian

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Elemen Reaksi:

• Elemen React ialah objek biasa yang menerangkan perkara yang anda mahu dipaparkan pada skrin dari segi nod DOM atau komponen lain. Elemen boleh mengandungi Elemen lain dalam prop mereka.
• Mencipta elemen React adalah murah. Sebaik sahaja elemen dicipta, ia tidak pernah bermutasi.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

7. Prinsip Teras Redux?

Jawapan:-

• Sumber Tunggal Kebenaran
• Negeri adalah baca sahaja (Jangan sekali-kali kemas kini secara langsung)
• Perubahan dibuat dalam Fungsi Tulen (Pengurang)
• Hanya berfungsi untuk Objek Boleh Bersiri.

8. Algoritma Beza, penyesuaian dan gentian React?

Jawapan:- Asingkan Artikel yang sama
Menyelam Lebih Dalam Algoritma & Proses Pengoptimuman React

9. Apakah peristiwa Sintetik dalam tindak balas?

Jawapan:- Acara yang kami pastikan harus konsisten merentas penyemak imbas yang berbeza.

Cth:- preventDefault(), stopPropagation()

10. Meningkatkan Negeri?

Jawapan:- Apabila Beberapa komponen perlu berkongsi data yang berubah yang sama maka adalah disyorkan untuk mengangkat keadaan kongsi itu kepada nenek moyang mereka yang terdekat.

Atas ialah kandungan terperinci React Persediaan Temuduga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!