自從去年底接觸flutter到現(xiàn)在欢揖，陸續(xù)在學(xué)習(xí)相關(guān)的一些基礎(chǔ)知識烈钞，具備React經(jīng)驗(yàn)對flutter的學(xué)習(xí)有很大幫助酗钞，官網(wǎng)也對ReactNative開發(fā)者有專門的說明，本文對此討論一下。
Component (React) vs Widget (Flutter)
在React中的Component概念在Flutter中對應(yīng)概念稱為Widget米同，都是為重用而生但金，也都分為有狀態(tài)和無狀態(tài)兩類，前者內(nèi)部維護(hù)state似枕，后者則是純渲染用的無狀態(tài)組件答憔。少了狀態(tài)維護(hù)和臟狀態(tài)判斷以決定是否需要重新render，無狀態(tài)組件自然輕量得多。
但React中無狀態(tài)組件就是一個單純的function，接收 props返回jsx瞻润，輕量到了極限，加上最新支持的hook楚午，function component已經(jīng)可以擁有自己的狀態(tài)信息就谜，完成本class component才具備的功能。而flutter中無狀態(tài)組件stateless widget是個抽象類隧甚，跟statefull widget同繼承自?Widget族吻，stateless widget從build方法生成Widget，stateful widget則是從createState返回的State調(diào)用build方法生成Widget。
從上面圖1可以看到類圖繼承關(guān)系和幾個關(guān)鍵成員孤澎，注意上面兩類箭頭型将，空心箭頭表示繼承（is）福扬，線條箭頭表示成員關(guān)系（has）。
Element -> Component -> Instance (React) vs Widget -> Element->RenderObject(Flutter)
React中Element是個plain object，簡單輕量創(chuàng)建沒什么成本，且不可變颂砸，用來描述組件的基本信息，包含組件的類型信息（簡單的組件類型type就是字符串碰缔，比如 div, span；復(fù)雜的類型就是類或者方法）精续，Component描述根據(jù)傳入屬性如何生成jsx，而component的instance則是React內(nèi)部負(fù)責(zé)創(chuàng)建和銷毀，用戶不需要直接參與；
Flutter的Widget也是不可變對象，包含Widget的初始化屬性信息以及狀態(tài)信息（針對stateful widget），通過Widget的createElement方法可以創(chuàng)建Element對象抄瓦，該對象代表Widget對象作為渲染樹節(jié)點(diǎn)成員钙姊，存在Element的一個意義是煞额，因?yàn)閃idget不可變，則屬性信息不變時候Widget可重用逆日，對應(yīng)渲染樹上多個Element對象搪哪。Element的renderObject屬性返回的RenderObject對象則是真正用于UI渲染的對象，RenderObject子類通過override paint方法實(shí)現(xiàn)Widget的UI的繪制。
-----回家啦赘娄，下次繼續(xù)寫----
