reactjs - 在 React 中如何使用 useState 钩子(Hook)更新状态

Question

我了解在 React 中使用 useState 钩子(Hook)更新状态的工作原理如下。

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

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

但在这个例子中，它的工作方式似乎有所不同。

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

Answer 1

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

此外，您必须记住，您永远无法在组件本身内更改组件的 props。 Prop 是从 parent 那里传来的， child 不能改变。但是对于state，你可以在onClick函数或render之外的任何其他函数中调用setState，以及任何当您调用 setState 时，您的组件将更新其 View 。

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

我希望这能回答你的问题