ReactJS中useState功能背后的想法是什么？

如何解决ReactJS中useState功能背后的想法是什么？

我正在学习ReactJS，并且了解函数式编程的好处。但是，我有点担心实际的useState方法。如果我们假设要更改一个变量，那么为什么要首先声明它为const？

我看到我可以简单地使用let number = 4;然后像这样{number}进行渲染。但是，我不能做的就是仅通过更改它来自动重新呈现它，例如使用类似 ++number }>的onClick事件。为什么会这样呢？我是否错过了按原样实施的特定原因？我的意思是为什么开发人员决定如果需要在更改时重新呈现该值，那么它必须是在useState功能的帮助下声明的const值？

我之所以这样问，是因为我怀疑自己在这方面缺少一些要点，我想了解它们。

解决方法

问题是您正在考虑某个功能组件好像它是有状态的。但事实并非如此。这是一个函数，一旦运行它就可以了。

以这个例子为例：

function useState() {
  let value = 1

  function setValue(v) {
    value = v
  }

  return [value,setValue]
}

function myFunction () {
  const [value,setValue] = useState();  // <----- we use const here

  return null
}

即使我们使用的是const，value变量也只存在于函数中，一旦函数返回就可以了。组件相同。

value的实际值存储在一个完全不同的范围内，useEffect可以在其中访问。

如果您有兴趣，请参见deep dive，了解内部反应如何工作

该变量被声明为const，因为不允许直接对其进行设置。在React中，状态本身是不可变的。仅允许您通过setState（或您的情况下的setNumber）或使用redux的操作对其进行更改。

那为什么呢？一开始似乎不必要的麻烦

首先，如果您的变量号更改，则react必须触发重新渲染。如果状态是可变的，则需要数据绑定，因为如果设置了数字，则必须更新视图。

在javascript中，数据绑定适用于简单的对象，但不适用于数组。例如，Vue.js作为使用双向数据绑定的替代方法，在处理数组时，其早期版本存在很多麻烦。这就是为什么现在只有七个预定义的方法可以与数组进行交互的原因（后来又添加了这些方法来解决该问题）。 Vue Js Array Methods

因此将状态声明为const的一个简单原因是，它可以更好地与数组配合使用。而且，如果您观看了所给出的示例，那么setNumber(number + 1)的编写内容就比number++多得多。但是setState(newArray)有效，而newArray[i] = newElement不起作用，因为由于JavaScript的限制，这无法触发重新渲染。

第二，它是一个更好的设计概念。将组件视为一个函数，它将视图返回到状态。如果状态发生变化，您将获得一个新视图。它简化了组件中属性之间的关系。如果允许您在渲染组件时更改状态，则会造成混乱。

React在渲染周期中起作用，即声明了某种状态，在“渲染阶段”期间计算了DOM（UI），然后在“提交阶段”期间刷新到了实际的DOM。

在每个循环状态内，状态都被视为常量（JS中的' '.join([f'{k} taka {v} note(s)' for k,v in results.items() if v > 0])只是意味着无法为变量分配新值，您可以使用const或let轻松声明它相反，react的工作原理相同），但出于react的目的，状态在渲染周期中为。通过状态更新方法之一进行更新时，react然后启动另一个渲染周期（更新状态，计算差异，提交到DOM）并在必要时重新渲染。

此过程很重要，也是将外部状态突变视为反模式的原因，它与React工作流程背道而驰，导致错误代码或更糟的问题，UI无法按预期更新。

反应component lifecycle

但是我不能做的只是通过更改自动重新渲染它例如使用var这样的onClick事件。为什么会这样？

反应状态更新使用称为reconciliation的过程来找出更改的内容和重新呈现的内容。简而言之，当更新反应状态时，它会使用新的对象引用进行更新，因此浅对象比较可以更快地检测到组件状态已更新。

声明状态并执行 ++number }>只会更改值，而不会更改引用，因此将其视为状态突变，这是反应中的反模式。