React HooK= { Diterangkan Secara Ringkas};

useState ialah cangkuk React yang membolehkan anda menambah keadaan pada komponen anda dengan mengembalikan tatasusunan dengan dua pembolehubah: state, setState. Keadaan semasa dan fungsi yang menjadi fungsi penetap apabila ia dipanggil. Ia boleh digunakan untuk menjejak data atau sifat yang perlu dijejaki dalam aplikasi, seperti rentetan, nombor, boolean, tatasusunan atau objek.
Contoh:

const [state, setState] = useState();

Secara ringkasnya, keadaan akan berubah pada bila-bila masa dan ia perlu dikemas kini, oleh itu 'setState' akan mengemas kini keadaan, mencetuskan pemaparan semula komponen anda dari semasa ke semasa.

Selain itu, useState boleh menyimpan sebarang jenis nilai Javascript, termasuk objek. Sesuatu yang perlu SENTIASA diingat ialah anda tidak boleh menukar objek yang anda pegang dalam React nyatakan secara langsung. Mula-mula, anda perlu mencipta yang baharu atau mencipta salinan yang sedia ada dan kemudian setState kepada salinan baharu. Contohnya:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

Untuk menggunakan useState dalam komponen React, mula-mula anda perlu mengimportnya membentuk React dengan menulis kod berikut di bahagian atas halaman komponen dalam dua cara berbeza, kedua-duanya berfungsi dengan sempurna supaya anda boleh memilih racun anda.

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

atau anda boleh menulis dalam satu baris

import React, {useState} from 'react';

React Cangkuk useState boleh dipanggil di peringkat atas komponen atau dalam cangkuk tersuai tetapi bukan di dalam gelung atau keadaan.

const [initialState, setInitialState] = useState();

Kedudukan permulaan hanya digunakan semasa pemaparan awal dan akan diabaikan dalam pemaparan berikutnya.
Fungsi initialState dihantar ke fungsi setInitialState, ia mengambil keadaan sebelumnya sebagai argumen dan mengembalikan newState.

Selain itu, pada pendapat saya, tiada peraturan khas tentang tempat anda boleh dan tidak boleh menggunakan Hooks dalam React. Sudah tentu, anda perlu berhati-hati dan taktikal untuk memastikan kod anda teratur.

Dalam salah satu projek saya, membina SPA(Aplikasi Halaman Tunggal) terdapat pelbagai komponen untuk mencapai matlamat saya. Rahsia untuk mengatur dengan baik, adalah untuk menjejaki komponen anda. Sebagai contoh, komponen App.js anda akan menggunakan {useState} bergantung pada jenis data yang perlu dikemas kini.
Mari perkenalkan satu lagi cangkuk berkuasa daripada React yang dipanggil: {useEffect} dan gunakannya bersama {useState} untuk menerangkan cara cangkuk ini melaksanakan operasi pada data. Contoh berikut datang daripada komponen App.js saya yang saya gunakan dalam projek baru-baru ini. Saya sedang bekerja dengan data fail db.json untuk mainan yang akan membantu perkembangan kanak-kanak untuk tahun pertama. Ini ialah titik akhir saya http://localhost:4000/toys untuk membantu anda memahami proses cara {useState} dan {useEffect} berfungsi di dalam komponen aplikasi.

Pertama: Mulakan Keadaan:

const [toys, setToys] = useState([]);

• Baris ini memulakan mainan pembolehubah keadaan dengan tatasusunan kosong [] sebagai nilai awal.
• setToys ialah fungsi yang akan digunakan untuk mengemas kini keadaan mainan.

Kedua: Ambil Data pada Lekapan Komponen:

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

• Cakuk {useEffect} digunakan untuk melakukan kesan sampingan dalam komponen.
• Fungsi di dalam {useEffect} akan dijalankan sekali apabila komponen dipasang kerana tatasusunan kebergantungan ([]) kosong.

Ketiga: Ambil Data Mainan:

• fetch("http://localhost:4000/toys")
  • Barisan ini membuat permintaan GET ke URL yang ditentukan untuk mengambil data mainan.
• .then(respon => response.json())
  • balasan daripada permintaan pengambilan ditukar kepada format JSON.
• .then(toysData => setToyData(toysData));
  • Data JSON (toysData) digunakan untuk mengemas kini keadaan mainan menggunakan fungsi setToys.

Untuk memahami lebih mendalam cara kedua-dua {useState, useEffect} berfungsi, anda boleh melawati tapak web rasmi React. Selain itu, sumber lain yang berguna ialah laman web w3schools, iaitu kegemaran peribadi saya. Ia terus ke inti dengan contoh yang anda boleh cuba dalam penyemak imbas mereka sendiri. Akhir sekali, jika anda memerlukan sumber yang lebih teknikal, dokumen web mdn akan membantu anda.

Atas ialah kandungan terperinci React HooK= { Diterangkan Secara Ringkas};. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!