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

33

以下是使用React useState Hook的标准方法：

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

但是，const count显然要将此变量重新分配给其他原始值。

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

— 纳乔
source

5

如果更改状态，该组件将明显重新渲染对吗？因此，如果重新渲染，计数将永远不会“重新分配”

— Kevin.a

3

实际上，在功能范围内，计数仍然是不变的。谢谢凯文！

— 纳乔

46

显然将重新分配给其他原始值

并不是的。重新呈现组件后，将再次执行该函数，从而创建新的作用域，创建新的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

展开摘要

注意：挂钩更为复杂，实际上并未像这样实现。这只是为了演示类似的行为。

— 费利克斯·克林
source

2

const 防止在同一范围内重新分配参考值。

从MDN

这并不意味着它拥有的值是不可变的，只是不能重新分配变量标识符。

也

常量不能与同一范围内的函数或变量共享其名称。

— 托尼
source

1

尽管原始值是不可变的，所以问题更多是关于解释const数字如何变化的问题？

— Fred Stark

0

调用setCount之后，将重新呈现组件，并且对useState的新调用将返回新值。关键是计数是不变的。所以这里没有错字。

从技术上讲，它是每个渲染的新变量。

资料来源：React Github问题：Docs-Hooks：那是const错字吗？

— ido户
source

0

在这里，我发现const令人沮丧，因为count需要更改，因此

  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
source