我們忘記了前端基礎知識
在所有最新的趨勢和無盡的范例中，我們似乎忘記了前端開發的基礎。
最近 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 和其他原則。如果簡單的任務變成了一個充滿困惑的解決方案的噩夢——停下來，從不同的角度重新思考它。可能你在某個解決方案上挖得太深而忘記了一些顯而易見的東西。
