參考：https://flutter.dev/docs/development/ui/widgets-intro

1.設計來源

設計靈感來自于React,所以有很多相似之處，Flutter是很多Widget構建的，類似與React的組件概念，ReactObject類似與虛擬DOM,兩者都有路由的概念，都可以是單頁面應用，都有Diff預算，都是基于狀態(tài)更新“虛擬DOM”，但是Flutter是根據 "虛擬DOM"去做屏幕繪制，而React則是構建DOM節(jié)點(個人理解，如有錯誤請指出!2021.3.21 夜)

Flutter widgets are built using a modern framework that takes inspiration from?[React]

2.控件分類

a.StatelessWidget 無狀態(tài)控件

b.StatefulWidget 有狀態(tài)控件

3.控件職責

控件本質就是為了最終轉換成RenderObject,從而為后面的繪制提供依據

A widget’s main job is to implement a?[`build()`](https://api.flutter.dev/flutter/widgets/StatelessWidget/build.html)?function, which describes the widget in terms of other, lower-level widgets. The framework builds those widgets in turn until the process bottoms out in widgets that represent the underlying?[`RenderObject`](https://api.flutter.dev/flutter/rendering/RenderObject-class.html), which computes and describes the geometry of the widget.

4.基礎控件

Text、Row、Column、Stack、Container

Stack疊加布局，React中我們常常使用postion:fixed達到效果

Container：感覺類似div吧

Row/Column：類似css的flex

5.基礎風格

MaterialApp、Cupertino

一般他們內置了很多功能，包含頂部導航條，路由機制

6.手勢

GestureDetector，其他的事件都是這個的衍生品，例如onPress

7.控件相互作用

a.回調函數

b.狀態(tài)值傳遞

8.一個控件可以接收若干個控件是一種重要思想

9.職責分離

兩個無狀態(tài)控件和一個父有狀態(tài)控件可以做職責分離，以便于構建更加復雜的控件

Notice the creation of two new stateless widgets, cleanly separating the concerns of?displaying?the counter (CounterDisplay) and?changing?the counter (CounterIncrementor). Although the net result is the same as the previous example, the separation of responsibility allows greater complexity to be encapsulated in the individual widgets, while maintaining simplicity in the parent.

10.Diff比較依據

默認是通過類型和順序，有key的話就是類型和key

React中列表循環(huán)組件我們需要為每個組件增加key,而Flutter也是類似的

By default, the framework matches widgets in the current and previous build according to their?runtimeType?and the order in which they appear. With keys, the framework requires that the two widgets have the same?key?as well as the same?runtimeType.