React Hooks

React Hooks ialah fungsi yang membolehkan anda menggunakan keadaan dan ciri React lain dalam komponen berfungsi, yang secara tradisinya hanya tersedia dalam komponen kelas. Mereka telah diperkenalkan dalam React 16.8 dan sejak itu telah menjadi standard untuk menulis komponen React. Berikut ialah pecahan cangkuk yang paling biasa digunakan:

1. useState

• Tujuan: Mengurus keadaan dalam komponen berfungsi.
• Penggunaan:

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

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

• Penjelasan: useState mengembalikan tatasusunan dengan dua elemen: nilai keadaan semasa (kiraan) dan fungsi untuk mengemas kininya (setCount). Ini membolehkan anda mengekalkan dan mengemas kini keadaan dalam komponen berfungsi.

2. useEffect

• Tujuan: Mengendalikan kesan sampingan seperti mengambil data, langganan atau menukar DOM secara manual dalam komponen berfungsi.
• Penggunaan:

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

  function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return <div>{data ? data : 'Loading...'}</div>;
  }

• Penjelasan: useEffect memerlukan dua hujah: fungsi untuk menjalankan kesan dan tatasusunan kebergantungan pilihan. Fungsi kesan berjalan selepas komponen dipaparkan. Jika anda menyediakan tatasusunan kebergantungan, kesannya hanya akan dijalankan apabila kebergantungan tersebut berubah.

3. gunakanKonteks

• Tujuan: Mengakses nilai konteks dalam komponen berfungsi.
• Penggunaan:

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

    return <div>The current theme is {theme}</div>;
  }

• Penjelasan: useContext membolehkan anda menggunakan nilai konteks secara langsung dalam komponen berfungsi tanpa memerlukan komponen Pengguna.

4. gunakanReducer

• Tujuan: Mengurus logik keadaan kompleks dalam komponen berfungsi, bertindak sebagai alternatif kepada useState.
• Penggunaan:

  import React, { useReducer } from 'react';

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
      <div>
        <p>Count: {state.count}</p>
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </div>
    );
  }

• Penjelasan: useReducer berguna untuk mengurus keadaan yang bergantung pada logik yang lebih kompleks atau berbilang tindakan. Ia memerlukan fungsi pengurang dan keadaan awal serta mengembalikan keadaan semasa dan fungsi penghantaran.

5. useRef

• Tujuan: Mengakses dan menyimpan rujukan boleh ubah kepada elemen atau nilai DOM yang berterusan merentas pemaparan.
• Penggunaan:

  import React, { useRef, useEffect } from 'react';

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </>
    );
  }

• Penjelasan: useRef mengembalikan objek boleh ubah dengan sifat .current yang boleh memegang nilai atau rujukan kepada elemen DOM. Nilai ini kekal merentas pemaparan tanpa mencetuskan pemaparan semula apabila dikemas kini.

6. useMemo dan useCallback

• Tujuan: Optimumkan prestasi dengan menghafal pengiraan atau fungsi yang mahal.
• Penggunaan:

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

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return <div>{expensiveCalculation}</div>;
  }

• Penjelasan: useMemo menghafal nilai yang dikira, mengiranya semula hanya apabila kebergantungannya berubah. useCallback menghafal fungsi, memastikan ia hanya ditakrifkan semula apabila kebergantungannya berubah.

Mengapa Cangkuk Berguna

• Kod Pembersih: Cangkuk membolehkan anda menulis kod yang lebih bersih dan mudah dibaca tanpa memerlukan komponen kelas.
• Kebolehgunaan semula: Cangkuk boleh digunakan semula merentas komponen yang berbeza atau dikongsi antara projek.
• Logik Berstatus dalam Komponen Fungsi: Cangkuk membolehkan anda mengurus keadaan dan kesan sampingan dalam komponen berfungsi, menjadikannya sekuat komponen kelas.

Cangkuk telah mengubah cara pembangun menulis aplikasi React, menjadikan komponen berfungsi lebih berkebolehan dan lebih mudah untuk diurus.

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