javascript - 为什么 React Hook useState 使用 const 而不是 let

Question

使用 React useState Hook 的标准方法如下:

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

但是这个const count变量显然会被重新分配给不同的原始值。

为什么变量没有定义为let count？

Answer 1

clearly going to be reassigned to a different primitive value

不是真的。当组件重新渲染时，该函数会再次执行，创建一个新的作用域，创建一个新的 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

注意: 钩子(Hook)要复杂得多，但实际上并不是这样实现的。这只是为了演示类似的行为。