不要太依赖 useState，useRef 可以帮你

你好👋
希望大家在这段疫情期间一切都好。

每当我在互联网上看到任何 reactjs 代码片段时，我都会注意到不必要的使用useState。

在 React 中，更新状态的性能开销非常大。主要原因是每次状态更新后，组件都会重新渲染。

以下是一个小例子：

在上面的代码中，我创建了一个计数器，useState当我增加计数器时，App component它会重新渲染。如果你检查一下日志，就会发现Component initialised它打印了 4 次（第一次是在组件初始化时，第三次是在我点击+按钮时）。它正在重新渲染，App component因为我点击按钮时会更新状态+。

这里我们需要使用状态，因为我们的目的是显示counter文档中的值。

考虑以下代码👇🏻

这里我使用了两个状态变量，一个用于设置值，一个用于设置输入的类型。我们真的需要两个状态变量吗？🤔。其实，我们为什么不尝试构建一个没有状态的组件呢？我这样说的原因是，假设我们正在构建一个包含许多输入字段的表单，在这种情况下，我们需要将值状态传递给表单组件。input component如果form component是这样，那么整个表单组件将在任何输入的每次按键时重新渲染。

解决方案

在第二个例子中，我们实际上不需要状态。useRef没问题。检查下面的代码👇🏻

在 ☝🏻 代码片段中，我们没有使用状态，但仍然可以实现我们想要的效果，而无需重新渲染。即使在表单用例中，如果将状态从 传递form到 ，input我们可以传递 ref，这样可以避免不必要的重新渲染。

因此，我建议，每当您处理 DOM 操作（例如有条件地更改类名或更改元素的任何属性等）时，请尝试使用useRef而不是useState。这将防止您的应用程序过多地重新渲染。

在 Linkedin上关注我
：https://www.linkedin.com/in/saketh-kowtha/
Twitter：https://twitter.com/sakethkowtha
Github：https: //github.com/saketh-kowtha

您现在可以通过给我买一杯咖啡来表达您的支持。