在所有最新的趋势和无尽的范例中，我们似乎忘记了前端开发的基础。
最近 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 的基本功能。
在 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 看来，这并不是一个难以解决的问题。总结以上内容：
本文链接：http://www.28at.com/showinfo-26-90042-0.html我们忘记了前端基础知识
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号