K60至尊版狂暴引擎2.0加持：超177萬跑分斬獲性能第一
Redmi的后性能時代戰略發布會今天下午如期舉辦，在本次發布會上，Redmi公布了多項關于和聯發科的深度合作，以及新機K60 Ultra在軟件和硬件方面的特性，例如：“K60 至尊版，雙芯旗艦
在所有最新的趨勢和無盡的范例中，我們似乎忘記了前端開發的基礎。
最近 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://m.www897cc.com/showinfo-26-90042-0.html我們忘記了前端基礎知識
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號