Memahami React's useState dengan Fungsi Panggilan Balik: A Deep Dive

Memahami useState React dengan Fungsi Panggilan Balik: A Deep Dive

React's useState hook ialah alat asas untuk menguruskan keadaan dalam komponen berfungsi. Walaupun ramai pembangun sudah biasa dengan penggunaan asasnya, corak panggil balik dalam useState sering diabaikan namun sangat berkuasa. Dalam siaran ini, kami akan meneroka bila dan sebab untuk menggunakan fungsi panggil balik dengan useState, lengkap dengan contoh praktikal.

Asas: useState Recap

Sebelum menyelami panggilan balik, mari segarkan semula cara useState biasanya berfungsi:

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

// Later in your component...
setCount(count + 1);

Mengapa Menggunakan Fungsi Panggilan Balik?

Corak panggil balik menjadi penting apabila anda mengemas kini keadaan berdasarkan nilai sebelumnya. Walaupun anda mungkin tergoda untuk menulis:

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

// ? This might not work as expected
const handleMultipleIncrements = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
};

Kod ini tidak akan menambah kiraan sebanyak 3 seperti yang anda jangkakan. Disebabkan oleh kumpulan keadaan React, semua kemas kini ini akan berdasarkan nilai kiraan asal yang sama.

Masukkan Fungsi Panggilan Balik

Di sinilah fungsi panggil balik bersinar:

const handleMultipleIncrements = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
};

Kini setiap kemas kini adalah berdasarkan keadaan sebelumnya, memastikan semua kenaikan digunakan dengan betul.

Contoh Dunia Sebenar: Troli Beli-belah

Mari kita lihat contoh praktikal mengurus troli beli-belah:

function ShoppingCart() {
  const [items, setItems] = useState([]);

  const addItem = (product) => {
    setItems(prevItems => {
      // Check if item already exists
      const existingItem = prevItems.find(item => item.id === product.id);

      if (existingItem) {
        // Update quantity of existing item
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }

      // Add new item
      return [...prevItems, { ...product, quantity: 1 }];
    });
  };

  // ... rest of the component
}

Amalan dan Petua Terbaik

1. Sentiasa gunakan panggilan balik apabila mengemas kini berdasarkan keadaan sebelumnya Ini memastikan kemas kini anda adalah berdasarkan nilai keadaan terkini.
2. Pastikan fungsi panggil balik tulen

   // ✅ Good
   setItems(prev => [...prev, newItem]);

   // ? Bad - Don't mutate previous state
   setItems(prev => {
     prev.push(newItem); // Mutating state directly
     return prev;
   });

1. Gunakan TypeScript untuk keselamatan jenis yang lebih baik

   const [items, setItems] = useState<CartItem[]>([]);

   setItems((prev: CartItem[]) => [...prev, newItem]);

Contoh Kemas Kini Negeri Kompleks

Berikut ialah contoh yang lebih kompleks yang menunjukkan cara panggilan balik boleh mengendalikan kemas kini keadaan yang canggih:

function TaskManager() {
  const [tasks, setTasks] = useState([]);

  const completeTask = (taskId) => {
    setTasks(prevTasks => prevTasks.map(task =>
      task.id === taskId
        ? {
            ...task,
            status: 'completed',
            completedAt: new Date().toISOString()
          }
        : task
    ));
  };

  const addSubtask = (taskId, subtask) => {
    setTasks(prevTasks => prevTasks.map(task =>
      task.id === taskId
        ? {
            ...task,
            subtasks: [...(task.subtasks || []), subtask]
          }
        : task
    ));
  };
}

Kesimpulan

Menggunakan fungsi panggil balik dengan useState adalah penting untuk kemas kini keadaan yang boleh dipercayai dalam React. Ia membantu menghalang keadaan perlumbaan, memastikan kemas kini negeri berdasarkan nilai terbaharu dan menjadikan kod anda lebih mudah diramal. Walaupun sintaks mungkin kelihatan lebih bertele-tele pada mulanya, faedah dari segi kebolehpercayaan dan kebolehselenggaraan amat berbaloi.

Ingat: jika keadaan baharu anda bergantung pada keadaan sebelumnya dalam apa jua cara, capai corak panggil balik. Diri masa depan anda (dan pasukan anda) akan berterima kasih kepada anda!

---

Ada soalan atau komen? Sila hubungi atau tinggalkan ulasan di bawah!

Atas ialah kandungan terperinci Memahami React's useState dengan Fungsi Panggilan Balik: A Deep Dive. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!