为什么React Hook useState使用const而不是让

Z时代
2024-01-10
分类：问答

以下是使用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