为啥 React Hook useState 使用 const 而不是 let

Posted 2023-02-21

【中文标题】为啥 React Hook useState 使用 const 而不是 let

【英文标题】：Why React Hook useState uses const and not let为什么 React Hook useState 使用 const 而不是 let

【发布时间】：2020-03-10 14:28:35

【问题描述】：

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

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

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

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

【问题讨论】：

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

确实，在函数的范围内 count 保持不变。谢谢凯文！

【参考方案1】：

显然会被重新分配给不同的原始值

不是真的。当组件重新渲染时，再次执行函数，创建一个新的作用域，创建一个新的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 要复杂得多，实际上并不是这样实现的。这只是为了演示类似的行为。

【参考方案2】：

const 防止在同一范围内重新分配引用的值。

来自MDN

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

还有

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

【讨论】：

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

【参考方案3】：

调用 setCount 后，组件被重新渲染，新的调用 useState 返回新值。关键是计数是不可变的。 所以这里没有错别字。

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

来源：React Github issue: Docs - Hooks: is that const a typo ?

【参考方案4】：

在这里我发现 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
  ;

【讨论】：

count 不应该这样修改......你应该使用setCount(count + 1); 并保留常量。这是误导性的，因为随后的重新渲染会起作用，但第一次渲染会以 0 以外的值开始。

也为了防止多个增量调用相互覆盖，你应该使用这个：setCount((count) => count + 1)

【参考方案5】：

它并没有完全分配一个新值。 useState 只是一个状态更新函数。在这里使用 Const 是因为值的变化是由 React 在其他地方管理的。你是在告诉 React 通过调用 useState 为你管理一些价值。