React进阶：摘除对钩子的滤镜——什么时候不应该用useEffect？

最新推荐文章于 2026-06-26 23:23:44 发布

原创最新推荐文章于 2026-06-26 23:23:44 发布 · 288 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#react.js #前端 #前端框架

我时常觉得一个人的进步不是他学到了什么，而是他反思总结了什么

由于业务需求的挤压，写代码的时候有时候完全靠直觉来写，后面干脆直接找Gpt帮我写了，这样对于自己很难有技术上的成长，对于代码的设计应该要更多地去考量。

定期时间记录自己对这个框架的理解

先来看看这一段代码

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
  // ...
}

这段代码的初衷是通过 firstName 和 lastName 的动态更新来计算出 fullName 的值，乍一看，似乎一切都很合理。

（二）性能问题分析

然而，当我们深入探究 React 的奥秘，特别是对于 useEffect 这个神奇的钩子时，会发现其中暗藏的波澜。在这里，其实存在一个不容忽视的性能问题，这个 useEffect 的使用就像在原本简洁的道路上设置了一个不必要的路障。

当 useState 钩子更新 firstName 和 lastName 的值时，组件的 UI 会触发重新渲染。而与此同时，useEffect 又会因为 firstName 和 lastName 的更新而再次被唤醒，造成了重复的操作。这不仅让代码变得冗余，还可能会影响性能。

正确例子：

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');
  const fullName = firstName + ' ' + lastName;
  // ...
}

在这个优化后的代码中，我们巧妙地绕过了 useEffect，直接将 fullName 计算为 firstName 和 lastName 的组合，让代码变得更加简洁明了。

在下次写代码时，不妨多问自己一个问题：这个逻辑真的需要用到 useEffect 吗？
技术成长，往往就藏在这些小小的思考和总结中。