小米平板5 Pro 12.4簡評：多專多能 兼顧影音娛樂的大屏利器
疫情帶來了網課，網課盤活了安卓平板，安卓平板市場雖然中途停滯了幾年，但好的一點就是停滯的這幾年行業又有了新的發展方向，例如超窄邊框、高刷新率、多攝鏡頭組合等，這就讓安卓
說實話現在我很激動。
從 React Compiler 開源到現在我連續研究分析 React Compiler 已經四天時間了，這期間我積累了大量的使用心得，整體感受就是它真的太強了！
現在我迫不及待地想跟大家分享 React Compiler 的深度使用體驗。
這篇文章我會結合三個實踐案例為大家解讀 React Compiler 到底強在哪，這可能會有一點難理解，不過道友們請放心，我會做好知識鋪墊，盡量用更簡單的方式來表達。內容梗概如下：
經過驗證發現由于 React19 之前的版本內部不包含 compiler-runtime，因此無法正常使用，我猜測可能會在以后提供插件來支持編譯老版本的項目。目前我是在 React 19 RC 版本中結合 Compiler。不過好消息是將項目升級到 React 19 難度并不高。許多三方庫也已經積極的適配了 React 19。
從演示效果上來看，這是一個普通的 tab 切換。但是先別急，我還有要求。我希望能實現極限的性能優化。
?
這個案例和要求不算特別難，但是對綜合能力的要求還是蠻高的，大家有空可以自己嘗試實現一下，看看能不能完全達到要求。
具體的完整實現我們會在后續的直播中跟大家分享。大家可以加我好友「icanmeetu」然后進 React19 討論群，React19 相關的直播消息會第一時間在群內公布。
這里，我主要想跟大家分享的就是 map 方法的小細節。有如下代碼：
{tabs.map((item, index) => { return ( <item.component appearder={item.appeared} key={item.title} selected={current === index} /> )})}它的編譯結果表現如下：
let t4;if ($[7] !== current) { t4 = tabs.map((item_0, index_1) => ( <item_0.component appearder={item_0.appeared} key={item_0.title} selected={current === index_1} /> )); $[7] = current; $[8] = t4;} else { t4 = $[8];}我們會發現，此時編譯緩存的是整個 map 表達式，但是由于 map 表達式又依賴于 current，因此，在我們點擊切換的交互過程中，每一次的 current 都會發生變化，那么這里針對 map 表達式的緩存就沒有了任何意義。
但是實際上，我們可以觀察到，我們有 4 個 Panel，點擊切換的交互發生時，實際上只有兩個 Pannel 發生了變化。因此，最極限的優化是，只有這兩個組件對應的函數需要重新 re-render，那么我們的代碼應該怎么寫呢？
其實非常簡單，那就是不用 map，將數組拆開直接手寫，代碼如下：
let c1 = tabRef.current[0]let c2 = tabRef.current[1]let c3 = tabRef.current[2]let c4 = tabRef.current[3]<c1.component appearder={c1.appeared} selected={current === 0}/><c2.component appearder={c2.appeared} selected={current === 1}/><c3.component appearder={c3.appeared} selected={current === 2}/><c4.component appearder={c4.appeared} selected={current === 3}/>然后，我們就會發現，在編譯結果中，不再緩存 map 表達式的結果，而是緩存每一個組件。
let t5;if ($[7] !== c1.component || $[8] !== c1.appeared || $[9] !== t4) { t5 = <c1.component appearder={c1.appeared} selected={t4} />; $[7] = c1.component; $[8] = c1.appeared; $[9] = t4; $[10] = t5;} else { t5 = $[10];}?
這樣做的收益在特定場景下的收益將會非常高。
經過上面的學習，想必各位道友對 React Compiler 的工作機制已經有了非常深刻的理解。此時，我們就需要分析一下，這樣的記憶化更新機制，到底有多強。
首先明確一點，和 Vue 等其他框架的依賴收集不同，React Compiler 依然不做依賴收集。
React 依然通過從根節點自上而下的 diff 來找出需要更新的節點。在這個過程中，我們會通過大量的判斷來決定使用緩存值。可以明確的是，Compiler 編譯之后的代碼，緩存命中的概率非常高，幾乎所有應該緩存的元素和函數都會被緩存起來。
因此，React Compiler 也能夠在不做依賴收集的情況下，做到元素級別的超級細粒度更細。但是，這樣做的代價就是，React 需要經歷大量的判斷來決定是否需要使用緩存結果。
所以這個時候，我們就需要明確，我所謂的大量判斷的時間成本，到底有多少？它會不會導致新的性能問題？
可以看到，Compiler 編譯之后的代碼中，幾乎所有的比較都是使用了全等比較，因此，我們可以寫一個例子來感知一下，超大量的全等比較到底需要花費多少時間。
測試代碼如下：
var cur = performance.now()for(let i = 0; i < 1000000; i++) { 'xxx' == 'xx'}var now = performance.now()console.log(now - cur)執行結果，比較 100 萬次，只需要花費不到 1.3 毫秒。這太強了啊。我們很難有項目能夠達到 1000,000 次的比較級別，甚至許多達到 10000 都難。那也就意味著，這里大量的比較成本，落實到你的項目中，幾乎可以忽略不計。
為了對比具體的效果，我們可以判斷一下依賴收集的時間成本。
首先是使用數組來收集依賴。依然是 100 萬次收集，具體執行結果如下。耗時 8 毫秒。
使用 Map 來收集依賴。100 萬次依賴收集耗時 54 ms。
使用 WeakMap 來收集依賴，那就更慢了。100萬次依賴收集耗時 200 毫秒。
?
WeakMap 的 key 不能是一個 number 類型。
數據展示給大家了，具體強不強，大家自行判斷。
?
這里我要明確的是，這樣的性能表現，在之前版本的項目中，合理運用 useCallback/memo 也能做到。只是由于對 React 底層默認命中規則不理解，導致大多數人不知道如何優化到這種程度。React Compiler 極大的簡化了這個過程。
有許多騷操作，React Compiler 并不支持，例如下面這種寫法。
{[1, 2, 3, 4, 5].map((counter) => { const [number, setNumber] = useState(0) return ( <div key={`hello${counter}`} onClick={() => setNumber(number + 1)}> number: {number} </div> )})}這個操作騷歸騷，但是真的有大佬想要這樣寫。React 之前的版本依然不支持這種寫法。不過好消息是，React 19 支持了...
但是 React Compiler 并不支持。對于這些不支持的語法，React Compiler 的做法就是直接跳過不編譯，而直接沿用原組件寫法。
因此，React Compiler 的最佳實踐我總結了幾條
這里，一個小小的彩蛋就是，當你不希望你的組件被 Compiler 編譯時，你只需要使用 var 來聲明狀態即可。因為這不符合它的語法規范
var [counter, setCounter] = useState(0)而你改成 const/let，它就會又重新編譯該組件。可控性與自由度非常高。
本文鏈接：http://www.tebozhan.com/showinfo-26-94585-0.html我已徹底拿捏 React Compiler，原來它是元素級細粒度更新。原理性能優秀實踐都在這七千字里
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號