DEV Community
·
不要再滥用 useState 了！
内容提要
学习 React hooks 时，useState 常用于更新组件状态，但过度使用可能导致性能问题。在登录页面中，每次输入都会触发重新渲染。可以用 useRef 替代 useState，只在提交时获取输入值，从而提高性能。
关键要点
-
学习 React hooks 时，useState 常用于更新组件状态。
-
过度使用 useState 可能导致性能问题，使项目变得更重。
-
在登录页面中，每次输入都会触发重新渲染，造成不必要的性能损失。
-
除非需要实时验证输入，否则不必在每次输入时跟踪值。
-
可以在用户提交时获取输入值，以提高性能。
-
使用 useRef 替代 useState，可以避免触发重新渲染。
-
在表单提交时，通过 useRef 获取输入值。
-
如果不需要，可以不使用 useRef，具体取决于表单的封装方式。
延伸解读
性能优化的重要性
在使用 React 开发时，性能优化是一个不可忽视的方面。过度使用 useState 会导致不必要的重新渲染，影响用户体验。开发者应关注组件的渲染效率，尤其是在输入频繁的场景中，如登录页面。
useRef 的优势
使用 useRef 替代 useState 可以有效减少组件的重新渲染次数。通过在用户提交时获取输入值，开发者可以提升应用的性能，尤其是在需要处理大量输入的表单中。了解何时使用 useRef 是提升开发效率的关键。
实时验证的必要性
在表单输入中，实时验证并非总是必要的。除非确实需要在每次输入时进行验证，否则可以选择在提交时进行处理。这不仅简化了代码逻辑，也能显著提高性能，减少不必要的计算。
延伸问答
为什么不应该过度使用 useState？
过度使用 useState 可能导致性能问题，使项目变得更重，尤其是在频繁更新状态时会触发不必要的重新渲染。
在登录页面中，使用 useState 会有什么问题？
在登录页面中，每次输入都会触发整个组件的重新渲染，造成不必要的性能损失。
如何提高表单输入的性能？
可以使用 useRef 替代 useState，只在用户提交时获取输入值，从而避免频繁的重新渲染。
useRef 和 useState 有什么区别？
useRef 不会触发组件重新渲染，而 useState 每次更新都会导致重新渲染，因此 useRef 更适合在不需要实时更新的场景中使用。
在什么情况下可以不使用 useRef？
如果表单的封装方式不需要实时跟踪输入值，可以选择不使用 useRef。
如何在表单提交时获取输入值？
在表单提交时，可以通过 useRef 获取输入值，而不是在每次输入时跟踪。
