今天參與了滿幫的一個大前端的一個技術(shù)沙龍，并結(jié)合掌握的相關(guān)知識做一些總結(jié)探索，相關(guān)截圖可能不是特別清楚
1.Flutter跨平臺的優(yōu)勢和不足
image.png
- Flutter跨平臺是直接面向渲染引擎的事镣，比RN少了一些中轉(zhuǎn)層或南，性能方面更加出色
- Flutter通過渲染引擎直接渲染驳规，所以多端UI更加一致
- Flutter本身不支持動態(tài)下發(fā)
2. Flutter動態(tài)化實(shí)現(xiàn)方案
image.png
- 通過編譯產(chǎn)物下發(fā),這個是我們正常理解的動態(tài)化或者熱更新，由于蘋果政策原因署海，暫時不可行
- 配置json和dart模板匹配或者部分邏輯交給js處理
- 通過定義一套新的類似于React的聲明形式語法來定義UI吗购，再解析轉(zhuǎn)換為json,再由dart解析医男，形成Flutter三顆樹中的第一個widget tree,這也是滿幫實(shí)現(xiàn)的方式（Thresh,感興趣的可以到github看看）
3. Thresh實(shí)現(xiàn)原理
image.png
image.png
image.png
image.png
image.png
Flutter三顆樹具體細(xì)節(jié)可以看我底部的參考資料，這里我自己簡單粗略白話說下
還記得我們app的main函數(shù)的runApp嗎捻勉？它接收一個Widget,所有的頁面其實(shí)都不過是一個大的Widget,她好比一個大配置文件镀梭，做過React開發(fā)的同學(xué)都知道虛擬DOM和真實(shí)DOM，不錯踱启，這個大配置文件相當(dāng)于虛擬DOM报账，這就是widget tree
widget tree生成的同時，相應(yīng)會有一個真實(shí)的DOM埠偿，這就是ElementTree,差異化更更新就是在這里
每個Widget最終會有個RenderObject 它也會產(chǎn)生樹透罢，布局產(chǎn)生圖像數(shù)據(jù)，最后光柵化冠蒋，顯示在屏幕上滿幫的方案其實(shí)是用一個動態(tài)化文件如json,構(gòu)建widget tree,也就是具有層級嵌套關(guān)系的多個widget 組合羽圃，這里和正常編寫widget tree有所不同，在性能指標(biāo)方面存在進(jìn)一步驗(yàn)證的空間抖剿，比較我們正常的widget tree的編譯產(chǎn)品要更加直接朽寞，目前我也不確定，需要實(shí)驗(yàn)對比...
4. 其他
- 標(biāo)準(zhǔn)化組件可以加快開發(fā)節(jié)奏斩郎，例如日歷控件應(yīng)該就一種(不完全排除差異化)
- 動態(tài)化發(fā)布意思就是動態(tài)下發(fā)一些如RN的Bundle,或者json文件脑融，實(shí)現(xiàn)模塊化更新，而不需要重新發(fā)版本
- 在框架之上再附加一層實(shí)現(xiàn)動態(tài)化應(yīng)該謹(jǐn)慎使用缩宜，除非動態(tài)化很重要
- Flutter Web我想有可能可以用來Flutter 動態(tài)化能力不足的問題肘迎，后續(xù)再專門考慮吧
