Tại sao React Hook useState sử dụng const và không cho

Cách tiêu chuẩn để sử dụng React useState Hook là như sau:

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

Tuy nhiên, const countbiến này rõ ràng sẽ được gán lại cho một giá trị nguyên thủy khác.

Tại sao sau đó biến không được định nghĩa là let count?

rõ ràng sẽ được gán lại cho một giá trị nguyên thủy khác

Không hẳn vậy. Khi thành phần được đăng ký lại, chức năng được thực hiện lại, tạo một phạm vi mới, tạo một countbiến mới , không liên quan gì đến biến trước đó.

Thí dụ:

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

Lưu ý: Móc là cách tinh vi hơn và không thực sự được thực hiện như thế này. Đây chỉ là để chứng minh một hành vi tương tự.

const là một người bảo vệ chống lại việc gán lại giá trị của tham chiếu trong cùng phạm vi.

Từ MDN

Điều đó không có nghĩa là giá trị mà nó giữ là bất biến, chỉ là định danh biến không thể được gán lại.

Cũng thế

Một hằng số không thể chia sẻ tên của nó với một hàm hoặc một biến trong cùng phạm vi.

Sau khi gọi setCount, thành phần được đăng ký lại và lệnh gọi mới của useState trả về giá trị mới. Vấn đề là tính bất biến. Vì vậy, không có lỗi đánh máy ở đây.

Về mặt kỹ thuật, nó là một biến mới ở mỗi kết xuất.

Nguồn: React Github vấn đề: Docs - Hook: đó có phải là một lỗi đánh máy không?

Ở đây tôi thấy rằng const đã bực bội vì số lượng cần phải thay đổi

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