Mengapa React Hook useState menggunakan const dan tidak membiarkan

33

Cara standar untuk menggunakan Hook React useState adalah sebagai berikut:

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

Namun const countvariabel ini jelas akan dipindahkan ke nilai primitif yang berbeda.

Lalu mengapa variabel tidak didefinisikan sebagai let count?

— Nacho
sumber

5

Jika Anda mengubah status, komponen akan dengan jelas merender ulang, kan? Jadi, jika dihitung ulang, maka tidak akan pernah "dipindahkan"

— Kevin.a

3

Memang, dalam ruang lingkup fungsi tetap tidak bisa dihitung. Kevin terima kasih!

— Nacho

46

jelas akan dipindahkan ke nilai primitif yang berbeda

Tidak juga. Ketika komponen di-rendendered, fungsi dieksekusi lagi, membuat ruang lingkup baru, membuat countvariabel baru , yang tidak ada hubungannya dengan variabel sebelumnya.

Contoh:

let _state;
let _initialized = false;
function useState(initialValue) {
  if (!_initialized) {
    _state = initialValue;
    _initialized = true;
  }
  return [_state, v => _state = v];
}

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

  console.log(count);
  setCount(count + 1);
}

Component();
Component(); // in reality `setCount` somehow triggers a rerender, calling Component again
Component(); // another rerender

Luaskan cuplikan

Catatan: Kait jauh lebih canggih dan tidak benar-benar diterapkan seperti ini. Ini hanya untuk menunjukkan perilaku yang serupa.

— Felix Kling
sumber

2

const adalah penjaga terhadap penugasan kembali nilai referensi dalam lingkup yang sama.

Dari MDN

Itu tidak berarti nilai yang dipegangnya tidak berubah, hanya saja pengenal variabel tidak dapat dipindahkan.

Juga

Konstanta tidak dapat membagikan namanya dengan fungsi atau variabel dalam cakupan yang sama.

— tony
sumber

1

Nilai-nilai primitif tidak dapat diubah, jadi pertanyaannya adalah lebih lanjut tentang menjelaskan mengapa konstanta dapat berubah?

— Fred Stark

0

Setelah memanggil setCount, komponen di-rerendered dan panggilan baru useState mengembalikan nilai baru. Intinya adalah bahwa hitungan tidak berubah. Jadi tidak ada salah ketik di sini.

Secara teknis itu adalah variabel baru di setiap render.

Sumber: Bereaksi masalah Github: Documents - Hooks: apakah itu const typo?

— Abido
sumber

0

di sini saya menemukan bahwa const frustasi karena hitungan perlu diubah begitu

  let [count, setCount] = useState(0)
  // simply can't use ++ on either side of count increment given we declare as const [count, setCount] 
  // instead declaration of var or let [count, setCount] allows simpler code
  const increment = () => {
    setCount(count++); //const cannot do this only let or var
  };

— urfx
sumber