React中如何使用useState挂钩更新状态

Question

我了解使用React中的 useState 钩子更新状态的工作原理。

1. 将要更改的状态值与当前状态值进行比较。
2. 如果两个状态值相同，请在不更改状态值的情况下重新渲染。
3. 如果两个状态值不同，请更改状态值并执行重新渲染。

https://codesandbox.io/s/nostalgic-fog-riyg4

但是在此示例中，它的工作方式似乎有所不同。

• 在安装App组件时首先执行渲染。
• 单击按钮并执行第二次渲染时，状态值会更改。 （因为当前状态值和要更改的状态值不同。）
• 再次单击该按钮时，状态值不会更改，但会进行渲染。 ->为什么会这样？我没想到会渲染，因为两个状态值是相同的。
• 当您第三次单击按钮时，状态值不会再次更改，但是这次组件不会重新呈现。这是我预期第二次点击后会发生的行为。

Answer 1

React组件每次更改state或props时都会更新。 react组件的这两个工件在render函数或render调用的任何函数中都无法更改。

此外，您还必须记住，您永远无法在组件本身内更改组件的属性。道具是从父母那里传来的，孩子不能改变。 但是对于state，您可以在setState函数或onClick之外的任何其他函数中调用render，并且每次调用setState时，组件将更新其视图。

在熟悉ReactJs之后，建议您将Redux用于任何类型的数据操作和功能。这是react-redux网站的链接：https://react-redux.js.org/

我希望这能回答您的问题

Answer 2

用于更新常规usestate函数： const [initialState，setState] = useState（initialState）

initialState是组件的初始状态，并且

setState是用于更新initialState的函数

有关react中的useState Hooks的更多信息： 链接：https://blog.bitsrc.io/understanding-react-hooks-usestate-6627120614ab