我們忘記了前端基礎(chǔ)知識
在所有最新的趨勢和無盡的范例中，我們似乎忘記了前端開發(fā)的基礎(chǔ)。
最近 Pavel Pogosov 注意到了一些改變他對這個行業(yè)看法的事情。似乎在所有無盡的趨勢、范式和新奇中，我們忘記了前端開發(fā)的核心。
在這篇文章中，Pavel Pogosov 想分享一些最近項目中的代碼片段，并試圖解釋他的想法。
無盡的過度復(fù)雜化
這里有一個最基本的卡片組件，它有一個可選的 header 屬性。如果這個屬性存在，我們會將其渲染在帶有特定類名的 div 中。
const Card = ({ children, header }) => {
return (
<div className="card">
{header && <div className="card__header">{header}</div>}
{children}
</div>
);
};在簡單的情況下，一切都運作良好。默認(rèn)情況下，<Card /> 不會渲染 header，而 <Card header={"I am header"} /> 會渲染 header。當(dāng) header 的內(nèi)容是動態(tài)的并且可能返回實際內(nèi)容或 null 時——<Card header={<CardHeader />} />，問題就開始出現(xiàn)了。我們的條件 {header && <div />} 無法檢測到它并會渲染一個空的 div。
一位開發(fā)者試圖解決這個問題。他想，“等等，我們可以檢查 div 的內(nèi)容，如果為空就隱藏它！”他寫了大致這樣的代碼：
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 不會被調(diào)用。經(jīng)過長時間的討論，開發(fā)者們決定將注意力轉(zhuǎn)向 MutationObserver。
在他們討論期間，他們也向 Pavel Pogosov 尋求建議。老實說，向他們展示 Pavel Pogosov 的解決方案真的很有趣）只需要使用常規(guī)的 CSS 就能解決這個問題。
.card__header:empty {
display: none;
}開發(fā)者們已經(jīng)習(xí)慣了過度復(fù)雜化任務(wù)，以至于他們甚至沒有檢查 CSS 的基本功能。
1993年的錯誤
在 Pavel Pogosov 之前的項目中，他們有一個側(cè)面板小部件，它必須拉伸到其全高，但不能覆蓋 header 和 footer。大致的公式如下：100% - headerHeight - footerHeight。
這個解決方案在所有頁面上都運行順暢，除了一個。在那個頁面上，footerHeight 不知何故等于 0。遇到這個錯誤的開發(fā)者深入挖掘并理解到 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 /> 出現(xiàn)在 footer 之前。<script /> 是同步調(diào)用的，而此時 footer 尚不存在，因此無法測量其高度。
Pavel Pogosov 只是交換了這些行，一切就開始正常工作了。
如今的開發(fā)者非常依賴現(xiàn)代工具，如 webpack 插件等。所以當(dāng)涉及到編寫一些 HTML 時，他們立刻就放棄了。但這有什么難的嗎？
萬惡之源
React hooks 同時是 React 中最好的也是最糟的東西。一方面，它們增加了靈活性，并提供了一種優(yōu)雅的方式來處理狀態(tài)。另一方面，它們顯著增加了代碼的復(fù)雜性，并使得更容易出錯。
仔細閱讀文檔并理解如何正確使用這些東西似乎并不難。然而，有些開發(fā)者忽略了這個顯而易見的步驟，開始在沒有完全理解其用途的情況下使用 hooks。特別是當(dāng)涉及到優(yōu)化和臭名昭著的 useMemo 和 useCallback 時?，F(xiàn)在，每個開發(fā)者都在沒有明確理由的情況下優(yōu)化整個應(yīng)用程序。
讓我們一起來看看這個“至關(guān)重要”的優(yōu)化。這不是 Pavel Pogosov 為這篇文章寫的虛構(gòu)代碼。這實際上是他某個項目中的一個片段。
const loaded = useMemo(() => {
return submitted && !loading && !error;
}, [submitted, error, loading]);
}在這個優(yōu)化之后，應(yīng)用程序的性能就“飆升”了！你可以理解，這完全沒有用，甚至稍微影響了應(yīng)用程序的首次加載。老實說，我仍然不明白編寫這個代碼的真正意圖。
接受事情是理所當(dāng)然的，不去考慮其他問題總是更容易。但實際上，自己做一點研究并不是真的那么難。
一些重要的建議
這種情況看起來確實令人擔(dān)憂。開發(fā)者開始忘記基礎(chǔ)技術(shù)，并且在所有新技術(shù)和方法中傾向于失去批判性思維。
然而，在 Pavel Pogosov 看來，這并不是一個難以解決的問題?？偨Y(jié)以上內(nèi)容：
- 花些時間理解原生 JavaScript。擁有堅實的基礎(chǔ)可以更輕松地發(fā)現(xiàn)錯誤的真正原因并相應(yīng)地修復(fù)它們。
- 深入學(xué)習(xí) HTML 和 CSS。你可以發(fā)現(xiàn)很多有用的屬性、選擇器和其他內(nèi)容，這些可以替代大量的 JavaScript 代碼?；叵胍幌率褂?:empty 選擇器的例子。
- 發(fā)展你的批判性思維能力。當(dāng)然，你的團隊領(lǐng)導(dǎo)教了你一些好的實踐和原則。但是，你不能盲目地遵循它們，因為這會讓你走向錯誤的方向。相反，試著理解為什么某件事是這樣的而不是那樣的。
- 記住 SOLID、YAGNI、KISS 和其他原則。如果簡單的任務(wù)變成了一個充滿困惑的解決方案的噩夢——停下來，從不同的角度重新思考它?？赡苣阍谀硞€解決方案上挖得太深而忘記了一些顯而易見的東西。
