我们忘记了前端基础知识-51CTO.COM

在所有最新的趋势和无尽的范例中，我们似乎忘记了前端开发的基础。

最近 Pavel Pogosov 注意到了一些改变他对这个行业看法的事情。似乎在所有无尽的趋势、范式和新奇中，我们忘记了前端开发的核心。

在这篇文章中，Pavel Pogosov 想分享一些最近项目中的代码片段，并试图解释他的想法。

无尽的过度复杂化

这里有一个最基本的卡片组件，它有一个可选的 header 属性。如果这个属性存在，我们会将其渲染在带有特定类名的 div 中。

const Card = ({ children, header }) => {
  return (
    <div className="card">
      {header && <div className="card__header">{header}</div>}
      {children}
    </div>
  );
};

在简单的情况下，一切都运作良好。默认情况下，<Card /> 不会渲染 header，而 <Card header={"I am header"} /> 会渲染 header。当 header 的内容是动态的并且可能返回实际内容或 null 时——<Card header={<CardHeader />} />，问题就开始出现了。我们的条件 {header && <div />} 无法检测到它并会渲染一个空的 div。

一位开发者试图解决这个问题。他想，“等等，我们可以检查 div 的内容，如果为空就隐藏它！”他写了大致这样的代码：

const Card = ({ children, header }) => {
  const headerRef = useRef();

  useEffect(() => {
    const hasContent = headerRef.current?.childNodes.length > 0;
    headerRef.current.style.display = hasContent ? "block" : "none";
  });

  return (
    <div className="card">
      {header && (
        <div ref={headerRef} className="card__header">
          {header}
        </div>
      )}
      {children}
    </div>
  );
};

另一个人在代码审查中注意到，这段代码仅在初次渲染时有效。如果是异步更新的，useEffect 不会被调用。经过长时间的讨论，开发者们决定将注意力转向 MutationObserver。

在他们讨论期间，他们也向 Pavel Pogosov 寻求建议。老实说，向他们展示 Pavel Pogosov 的解决方案真的很有趣）只需要使用常规的 CSS 就能解决这个问题。

.card__header:empty {
  display: none;
}

开发者们已经习惯了过度复杂化任务，以至于他们甚至没有检查 CSS 的基本功能。

1993年的错误

在 Pavel Pogosov 之前的项目中，他们有一个侧面板小部件，它必须拉伸到其全高，但不能覆盖 header 和 footer。大致的公式如下：100% - headerHeight - footerHeight。

这个解决方案在所有页面上都运行顺畅，除了一个。在那个页面上，footerHeight 不知何故等于 0。遇到这个错误的开发者深入挖掘并理解到 document.querySelector('footer') 返回 null，但 footer 仍然在页面上渲染。你猜他做了什么？是的，他又使用了 MutationObserver。

这对 Pavel Pogosov 来说看起来很奇怪，所以他决定寻找一个替代解决方案。Pavel Pogosov 确实找到了。所有他需要做的只是交换几行代码……

<html>
<head></head>
<body>
  <header></header>
  <main id="root"></main>
  <script src="index.js"></script>
  <footer></footer>
</body>
</html>

不知怎么的，<script /> 出现在 footer 之前。<script /> 是同步调用的，而此时 footer 尚不存在，因此无法测量其高度。

Pavel Pogosov 只是交换了这些行，一切就开始正常工作了。

如今的开发者非常依赖现代工具，如 webpack 插件等。所以当涉及到编写一些 HTML 时，他们立刻就放弃了。但这有什么难的吗？

万恶之源

React hooks 同时是 React 中最好的也是最糟的东西。一方面，它们增加了灵活性，并提供了一种优雅的方式来处理状态。另一方面，它们显著增加了代码的复杂性，并使得更容易出错。

仔细阅读文档并理解如何正确使用这些东西似乎并不难。然而，有些开发者忽略了这个显而易见的步骤，开始在没有完全理解其用途的情况下使用 hooks。特别是当涉及到优化和臭名昭著的 useMemo 和 useCallback 时。现在，每个开发者都在没有明确理由的情况下优化整个应用程序。

让我们一起来看看这个“至关重要”的优化。这不是 Pavel Pogosov 为这篇文章写的虚构代码。这实际上是他某个项目中的一个片段。

const loaded = useMemo(() => {
    return submitted && !loading && !error;
  }, [submitted, error, loading]);
}

在这个优化之后，应用程序的性能就“飙升”了！你可以理解，这完全没有用，甚至稍微影响了应用程序的首次加载。老实说，我仍然不明白编写这个代码的真正意图。

接受事情是理所当然的，不去考虑其他问题总是更容易。但实际上，自己做一点研究并不是真的那么难。

一些重要的建议

这种情况看起来确实令人担忧。开发者开始忘记基础技术，并且在所有新技术和方法中倾向于失去批判性思维。

然而，在 Pavel Pogosov 看来，这并不是一个难以解决的问题。总结以上内容：

花些时间理解原生 JavaScript。拥有坚实的基础可以更轻松地发现错误的真正原因并相应地修复它们。
深入学习 HTML 和 CSS。你可以发现很多有用的属性、选择器和其他内容，这些可以替代大量的 JavaScript 代码。回想一下使用 :empty 选择器的例子。
发展你的批判性思维能力。当然，你的团队领导教了你一些好的实践和原则。但是，你不能盲目地遵循它们，因为这会让你走向错误的方向。相反，试着理解为什么某件事是这样的而不是那样的。
记住 SOLID、YAGNI、KISS 和其他原则。如果简单的任务变成了一个充满困惑的解决方案的噩梦——停下来，从不同的角度重新思考它。可能你在某个解决方案上挖得太深而忘记了一些显而易见的东西。