理解useState中的双重渲染

在React中，useState钩子通常用于管理组件状态。但是，在某些条件下，您可能会注意到使用 useState 呈现的组件对于每次状态更新都会呈现两次。这种行为让许多未启用严格模式的开发人员感到困惑。为什么会出现这种情况？

严格模式的作用

与未启用严格模式的假设相反，您的代码实际上是在其约束下运行的。默认情况下，React 的现代版本将最外层组件隐式包装在 元素中。此模式增强了调试并突出显示潜在的性能问题。

严格模式下的双重函数调用

React 的文档明确指出严格模式有意“双重调用”某些函数，包括传递给 setState 和 useState 的状态更新器函数。这意味着每当您在代码中调用 setNumber 时，它都会被调用两次。

双重调用的后果

此双重调用导致组件被渲染两次。此行为旨在通过使潜在的副作用更具确定性来帮助开发人员发现潜在的副作用。默认情况下，React 在使用 useState 钩子时会延迟更新。但是，严格模式会绕过此行为，导致渲染发生两次。

结论

总之，使用 useState 的组件的双重渲染是运行您的React 严格模式下的代码。虽然这似乎出乎意料，但这种行为是有意为之，旨在通过使副作用更加明显来增强调试功能。