从React到Flutter

自从去年底接触flutter到现在，陆续在学习相关的一些基础知识，具备React经验对flutter的学习有很大帮助，官网也对ReactNative开发者有专门的说明，本文对此讨论一下。

Component (React) vs Widget (Flutter)

在React中的Component概念在Flutter中对应概念称为Widget，都是为重用而生，也都分为有状态和无状态两类，前者内部维护state，后者则是纯渲染用的无状态组件。少了状态维护和脏状态判断以决定是否需要重新render，无状态组件自然轻量得多。

但React中无状态组件就是一个单纯的function，接收 props返回jsx，轻量到了极限，加上最新支持的hook，function component已经可以拥有自己的状态信息，完成本class component才具备的功能。而flutter中无状态组件stateless widget是个抽象类，跟statefull widget同继承自 Widget，stateless widget从build方法生成Widget，stateful widget则是从createState返回的State调用build方法生成Widget。

1. Widget类图

从上面图1可以看到类图继承关系和几个关键成员，注意上面两类箭头，空心箭头表示继承（is），线条箭头表示成员关系（has）。

Element -> Component -> Instance (React) vs Widget -> Element->RenderObject(Flutter)

React中Element是个plain object，简单轻量创建没什么成本，且不可变，用来描述组件的基本信息，包含组件的类型信息（简单的组件类型type就是字符串，比如 div, span；复杂的类型就是类或者方法），Component描述根据传入属性如何生成jsx，而component的instance则是React内部负责创建和销毁，用户不需要直接参与；

Flutter的Widget也是不可变对象，包含Widget的初始化属性信息以及状态信息（针对stateful widget），通过Widget的createElement方法可以创建Element对象，该对象代表Widget对象作为渲染树节点成员，存在Element的一个意义是，因为Widget不可变，则属性信息不变时候Widget可重用，对应渲染树上多个Element对象。Element的renderObject属性返回的RenderObject对象则是真正用于UI渲染的对象，RenderObject子类通过override paint方法实现Widget的UI的绘制。

-----回家啦，下次继续写----