小米降噪藍(lán)牙耳機(jī)Necklace分享：聽(tīng)一首歌 讀懂一個(gè)故事
在今天下午的小米Civi 2新品發(fā)布會(huì)上，小米還帶來(lái)了一款新的降噪藍(lán)牙耳機(jī)Necklace，我們也在發(fā)布結(jié)束的第一時(shí)間給大家?guī)?lái)這款耳機(jī)的簡(jiǎn)單分享。現(xiàn)在大家能見(jiàn)到最多的藍(lán)牙耳機(jī)
在所有最新的趨勢(shì)和無(wú)盡的范例中，我們似乎忘記了前端開發(fā)的基礎(chǔ)。
最近 Pavel Pogosov 注意到了一些改變他對(duì)這個(gè)行業(yè)看法的事情。似乎在所有無(wú)盡的趨勢(shì)、范式和新奇中，我們忘記了前端開發(fā)的核心。
在這篇文章中，Pavel Pogosov 想分享一些最近項(xiàng)目中的代碼片段，并試圖解釋他的想法。
這里有一個(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)題就開始出現(xiàn)了。我們的條件 {header && <div />} 無(wú)法檢測(cè)到它并會(huì)渲染一個(gè)空的 div。
一位開發(fā)者試圖解決這個(gè)問(wèn)題。他想，“等等，我們可以檢查 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> );};另一個(gè)人在代碼審查中注意到，這段代碼僅在初次渲染時(shí)有效。如果是異步更新的，useEffect 不會(huì)被調(diào)用。經(jīng)過(guò)長(zhǎng)時(shí)間的討論，開發(fā)者們決定將注意力轉(zhuǎn)向 MutationObserver。
在他們討論期間，他們也向 Pavel Pogosov 尋求建議。老實(shí)說(shuō)，向他們展示 Pavel Pogosov 的解決方案真的很有趣）只需要使用常規(guī)的 CSS 就能解決這個(gè)問(wèn)題。
.card__header:empty { display: none;}開發(fā)者們已經(jīng)習(xí)慣了過(guò)度復(fù)雜化任務(wù)，以至于他們甚至沒(méi)有檢查 CSS 的基本功能。
在 Pavel Pogosov 之前的項(xiàng)目中，他們有一個(gè)側(cè)面板小部件，它必須拉伸到其全高，但不能覆蓋 header 和 footer。大致的公式如下：100% - headerHeight - footerHeight。
這個(gè)解決方案在所有頁(yè)面上都運(yùn)行順暢，除了一個(gè)。在那個(gè)頁(yè)面上，footerHeight 不知何故等于 0。遇到這個(gè)錯(cuò)誤的開發(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 只是交換了這些行，一切就開始正常工作了。
如今的開發(fā)者非常依賴現(xiàn)代工具，如 webpack 插件等。所以當(dāng)涉及到編寫一些 HTML 時(shí)，他們立刻就放棄了。但這有什么難的嗎？
React hooks 同時(shí)是 React 中最好的也是最糟的東西。一方面，它們?cè)黾恿遂`活性，并提供了一種優(yōu)雅的方式來(lái)處理狀態(tài)。另一方面，它們顯著增加了代碼的復(fù)雜性，并使得更容易出錯(cuò)。
仔細(xì)閱讀文檔并理解如何正確使用這些東西似乎并不難。然而，有些開發(fā)者忽略了這個(gè)顯而易見(jiàn)的步驟，開始在沒(méi)有完全理解其用途的情況下使用 hooks。特別是當(dāng)涉及到優(yōu)化和臭名昭著的 useMemo 和 useCallback 時(shí)。現(xiàn)在，每個(gè)開發(fā)者都在沒(méi)有明確理由的情況下優(yōu)化整個(gè)應(yīng)用程序。
讓我們一起來(lái)看看這個(gè)“至關(guān)重要”的優(yōu)化。這不是 Pavel Pogosov 為這篇文章寫的虛構(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ō)，我仍然不明白編寫這個(gè)代碼的真正意圖。
接受事情是理所當(dāng)然的，不去考慮其他問(wèn)題總是更容易。但實(shí)際上，自己做一點(diǎn)研究并不是真的那么難。
這種情況看起來(lái)確實(shí)令人擔(dān)憂。開發(fā)者開始忘記基礎(chǔ)技術(shù)，并且在所有新技術(shù)和方法中傾向于失去批判性思維。
然而，在 Pavel Pogosov 看來(lái)，這并不是一個(gè)難以解決的問(wèn)題。總結(jié)以上內(nèi)容：
本文鏈接：http://www.tebozhan.com/showinfo-26-90042-0.html我們忘記了前端基礎(chǔ)知識(shí)
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)