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