DEV Community
·
不要再滥用 useState 了！
原文英文，约300词，阅读约需1分钟。
📝
内容提要
学习 React hooks 时，useState 常用于更新组件状态，但过度使用可能导致性能问题。在登录页面中，每次输入都会触发重新渲染。可以用 useRef 替代 useState，只在提交时获取输入值，从而提高性能。
🎯
关键要点
-
学习 React hooks 时，useState 常用于更新组件状态。
-
过度使用 useState 可能导致性能问题，使项目变得更重。
-
在登录页面中，每次输入都会触发重新渲染，造成不必要的性能损失。
-
除非需要实时验证输入，否则不必在每次输入时跟踪值。
-
可以在用户提交时获取输入值，以提高性能。
-
使用 useRef 替代 useState，可以避免触发重新渲染。
-
在表单提交时，通过 useRef 获取输入值。
-
如果不需要，可以不使用 useRef，具体取决于表单的封装方式。
❓
延伸问答
为什么不应该过度使用 useState？
过度使用 useState 可能导致性能问题，使项目变得更重，尤其是在频繁更新状态时会触发不必要的重新渲染。
在登录页面中，使用 useState 会有什么问题？
在登录页面中，每次输入都会触发整个组件的重新渲染，造成不必要的性能损失。
如何提高表单输入的性能？
可以使用 useRef 替代 useState，只在用户提交时获取输入值，从而避免频繁的重新渲染。
useRef 和 useState 有什么区别？
useRef 不会触发组件重新渲染，而 useState 每次更新都会导致重新渲染，因此 useRef 更适合在不需要实时更新的场景中使用。
在什么情况下可以不使用 useRef？
如果表单的封装方式不需要实时跟踪输入值，可以选择不使用 useRef。
如何在表单提交时获取输入值？
在表单提交时，可以通过 useRef 获取输入值，而不是在每次输入时跟踪。
🏷️
