Konsep utama tindak balas || Bertindak balas

Dalam React.js, terdapat beberapa kaedah tersedia untuk mengurus komponen, mengendalikan peristiwa kitaran hayat dan bekerja dengan cangkuk. Di bawah, saya telah mengkategorikan kaedah yang paling penting kepada bahagian yang berbeza:

1. Kaedah Kitar Hayat Komponen (Komponen Kelas)

Dalam React komponen kelas, terdapat beberapa kaedah kitar hayat yang boleh anda ganti untuk menjalankan kod pada masa tertentu dalam kitaran hayat komponen:

Fasa Pemasangan (memulakan komponen)

• pembina()

  • Dipanggil sebelum komponen dipasang.
  • Berguna untuk memulakan pengendali acara keadaan atau mengikat.

• statik getDerivedStateFromProps(props, state)

  • Dipanggil sebelum membuat persembahan, kedua-duanya pada pemasangan awal dan pada kemas kini berikutnya.
  • Membenarkan keadaan dikemas kini berdasarkan prop.

• render()

  • Satu-satunya kaedah yang diperlukan dalam komponen kelas.
  • Hendaklah mengembalikan elemen React, yang akan diberikan kepada DOM.

• componentDidMount()

  • Dipanggil serta-merta selepas komponen dipasang.
  • Biasa digunakan untuk mengambil data, menyediakan langganan atau membuat panggilan API.

Fasa Kemas Kini (pemarahan semula disebabkan perubahan dalam prop atau keadaan)

• statik getDerivedStateFromProps(props, state)

  • (Juga dipanggil semasa kemas kini) Digunakan untuk mengemas kini keadaan berdasarkan prop.

• sepatutnyaComponentUpdate(nextProps, nextState)

  • Menentukan sama ada pemaparan semula diperlukan.
  • Boleh digunakan untuk mengoptimumkan prestasi dengan menghalang pemaparan yang tidak perlu.

• render()

  • (Dipanggil sekali lagi semasa kemas kini)

• getSnapshotBeforeUpdate(prevProps, prevState)

  • Dipanggil tepat sebelum perubahan daripada DOM maya digunakan pada DOM sebenar.
  • Berguna untuk menangkap maklumat (seperti kedudukan tatal) sebelum kemas kini.

• componentDidUpdate(prevProps, prevState, snapshot)

  • Dipanggil serta-merta selepas pengemaskinian berlaku.
  • Berguna untuk melaksanakan operasi selepas komponen telah dikemas kini (mis., membuat panggilan API berdasarkan perubahan prop).

Fasa Nyahlekap (membersihkan sebelum komponen dikeluarkan)

• komponenWillUnmount()
  • Dipanggil sejurus sebelum komponen dinyahlekap dan dimusnahkan.
  • Berguna untuk membersihkan langganan, pemasa atau pendengar acara.

Pengendalian Ralat

• komponenDidCatch(ralat, maklumat)
  • Dipanggil jika terdapat ralat semasa pemaparan, dalam kaedah kitaran hayat atau dalam pembina mana-mana komponen anak.
  • Berguna untuk mengelog ralat dan memaparkan UI sandaran.

2. Cangkuk Bertindak balas (Komponen Fungsi)

Hooks ialah tambahan baharu dalam React 16.8 yang membolehkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas.

Kail Asas

• useState(initialState)
  • Membolehkan anda menambah keadaan pada komponen berfungsi.
  • Mengembalikan pembolehubah keadaan dan fungsi untuk mengemas kininya.

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

• useEffect(panggilan balik, kebergantungan)
  • Serupa dengan componentDidMount, componentDidUpdate dan componentWillUnmount digabungkan.
  • Digunakan untuk kesan sampingan seperti pengambilan data, langganan atau menukar DOM secara manual.

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• gunakanKonteks(Konteks)
  • Membolehkan anda melanggan konteks React tanpa meletakkan komponen Pengguna.

  const value = useContext(MyContext);

Cangkuk Tambahan

• useReducer(reducer, initialState)
  • Alternatif untuk menggunakanState untuk mengurus logik keadaan yang lebih kompleks.

  const [state, dispatch] = useReducer(reducer, initialState);

• gunakanPanggil balik(panggilan balik, kebergantungan)
  • Mengembalikan versi fungsi panggil balik yang dihafal, berguna untuk mengoptimumkan komponen anak yang bergantung pada kesamaan rujukan.

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo(buat, kebergantungan)
  • Mengembalikan nilai yang dihafal, digunakan untuk mengoptimumkan pengiraan yang mahal.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(initialValue)
  • Mengembalikan objek ref boleh ubah, yang berterusan antara pemaparan.
  • Berguna untuk mengakses elemen DOM atau menyimpan nilai boleh ubah.

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, dependencies)
  • Menyesuaikan nilai contoh yang didedahkan apabila menggunakan ref dengan forwardRef.

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect(panggilan balik, kebergantungan)

  • Serupa dengan useEffect, tetapi menyala secara serentak selepas semua mutasi DOM.
  • Berguna untuk membaca reka letak daripada DOM dan memaparkan semula secara serentak.

• useDebugValue(nilai)

  • Boleh digunakan untuk memaparkan label dalam React DevTools untuk cangkuk tersuai.

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

3. Kaedah Pengendalian Acara

React menyediakan kaedah untuk mengendalikan acara, sama seperti pengendalian acara DOM biasa, tetapi dengan beberapa perbezaan:

• onClick
• padaPerubahan
• pada Hantar
• onFokus
• onBlur
• onKeyPress

Contoh:

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. Kaedah Reaksi Lain

Ini adalah kaedah tambahan yang mungkin berguna untuk anda:

• React.createRef()

  • Digunakan untuk membuat rujukan dalam komponen kelas.

• React.forwardRef()

  • Haruskan rujukan kepada komponen kanak-kanak.

• React.memo(Komponen)

  • Komponen tertib lebih tinggi yang menghalang pemaparan semula jika prop tidak berubah.

• React.malas()

  • Digunakan untuk pemisahan kod dan komponen memuatkan malas.

• Bertindak balas. Suspen

  • Digunakan dalam kombinasi dengan React.lazy() untuk menunjukkan sandaran semasa memuatkan komponen malas.

5. Kaedah Penghala Reaksi (untuk Penghalaan)

• useNavigate() (React Router v6)
• useParams()
• gunakanLokasi()
• useMatch()

Contoh:

  const value = useContext(MyContext);

6. Jenis Prop dan Prop Lalai

• propTypes

  • Digunakan untuk mengesahkan jenis prop yang dihantar kepada komponen.

• defaultProps

  • Digunakan untuk menetapkan nilai lalai untuk prop.

Contoh:

  const [state, dispatch] = useReducer(reducer, initialState);

Kesimpulan

• Komponen kelas lebih tradisional dan menggunakan kaedah kitaran hayat.
• Komponen berfungsi memanfaatkan cangkuk dan biasanya lebih disukai dalam pembangunan React moden kerana kesederhanaan dan faedah prestasinya.

Gunakan komponen kelas apabila anda memerlukan kawalan terperinci ke atas kitaran hayat komponen dan cangkuk apabila anda mahukan API yang lebih ringkas dan bersih.

Atas ialah kandungan terperinci Konsep utama tindak balas || Bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!