ทำไม React Hook useState ใช้ const และไม่อนุญาต

วิธีมาตรฐานในการใช้ React useState Hook มีดังต่อไปนี้:

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

อย่างไรก็ตามconst countตัวแปรนี้จะถูกกำหนดใหม่ให้เป็นค่าดั้งเดิมที่แตกต่างกันอย่างชัดเจน

ทำไมตัวแปรไม่ได้ถูกกำหนดเป็นlet count?

ชัดเจนว่าจะถูกกำหนดใหม่ให้เป็นค่าดั้งเดิมที่แตกต่างกัน

ไม่ได้จริงๆ เมื่อส่วนประกอบถูกส่งซ้ำฟังก์ชันจะถูกดำเนินการอีกครั้งสร้างขอบเขตใหม่สร้างcountตัวแปรใหม่ซึ่งไม่มีส่วนเกี่ยวข้องกับตัวแปรก่อนหน้า

ตัวอย่าง:

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

หมายเหตุ: Hooks นั้นซับซ้อนกว่านี้มากและไม่ได้มีการนำมาใช้เช่นนี้ นี่เป็นเพียงการแสดงให้เห็นถึงพฤติกรรมที่คล้ายกัน

const เป็นตัวป้องกันการกำหนดค่าของการอ้างอิงภายในขอบเขตเดียวกันอีกครั้ง

จากMDN

ไม่ได้หมายความว่าค่าที่เก็บไว้นั้นไม่เปลี่ยนรูปเพียง แต่ตัวระบุตัวแปรไม่สามารถกำหนดใหม่ได้

ด้วย

ค่าคงที่ไม่สามารถแบ่งปันชื่อกับฟังก์ชันหรือตัวแปรในขอบเขตเดียวกัน

หลังจากเรียก setCount ส่วนประกอบจะถูกสร้างซ้ำและการเรียกใช้ useState ใหม่จะส่งกลับค่าใหม่ ประเด็นก็คือการนับนั้นไม่เปลี่ยนรูป ดังนั้นไม่มีการพิมพ์ผิดที่นี่

ในทางเทคนิคแล้วมันเป็นตัวแปรใหม่ที่แสดงผลทุกครั้ง

ที่มา: ตอบโต้ปัญหา Github: เอกสาร - hooks: นั่นเป็นตัวพิมพ์ผิดหรือเปล่า?

ที่นี่ฉันพบว่า const รู้สึกหงุดหงิดเนื่องจากการนับต้องเปลี่ยน

  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
  };