用React写flutter|用React写flutter app 用React写flutterapp

豆皮粉儿们，大家好呀，今天这一期，由字节跳动数据平台的“奕轩”同学给大家带来如何用React写flutter app。

作者：奕轩

基本概念 flutter 谷歌推出的移动端框架，特点是多端高度一致性，性能好，包含丰富的安卓和ios风格的组件，使用dart作为开发语言
长这样??

mxflutter 一句话：让js以dart和flutter的形式写app
长这样??
https://github.com/mxflutter/...
react
react架构引用自Remax - 使用真正的 React 构建小程序
关键点

ReactReconciler维护VirtualDOM，fiber算法，决定VirtualDOM的一切更新
VirtualDOM的渲染由各个renderer实现：react-dom、react-native

Component组件宿主组件
宿主能理解的最小单位的组件，浏览器中是div,span,h1等，react-native中是View,Text,Image等，宿主元素是一个字符串
复合组件
用宿主组件或其他复合组件组成的组件，是一个class component或function component
Element

使用React.createElement创建的对象，用来描述视图节点，可以理解为组件的实例

长这样??

实现基本思想定义一种虚拟节点类VNode，并定义VNode的append、remove、insert等方法，利用react-reconciler提供的api在创建节点、插入节点、更新节点等接口中对VNode进行更新。这样，在ReactReconciler每次对VirtualDOM更新时我们都能知道更新了什么，并且把更新的内容转成我们认识的结构，维护一个VNode tree，用它渲染widget tree
具体过程初始代码??

React.createElement ??

ReactReconciler+VNode=NodeTree ??

递归渲染??

核心上述过程最关键的在于如何将一个react element tree转换为我们能够进行递归的节点树
流程图
react-reconciler react-reconciler 可以认为是一组hooks（类似于 git hooks，而非 react hooks），去填充它暴露出来的这些生命周期函数，就可以将 React 应用到任意“宿主”系统中
长这样??

react-reconciler做了什么？
在首次渲染过程中构建出vDOM tree，后续需要更新时（setState()），diff VirtualDOM tree得到 change，并把node change更新（patch）到NodeTree
VNode VNode是VirtualDOM的最小单位，在react-reconciler的hook方法中去创建VNode、插入子VNode、删除子VNode等
【用React写flutter|用React写flutter app】长这样??

Bridge Bridge的作用是桥接ReactReconciler和mxflutter，当VNode有更新时，VNode持有的Bridge将diff node更新到mxflutter
未来我们的目标是现有项目可以经过越少越好的修改能跑在app上，
上述原理只解决了dom映射的问题，还有以下问题需要被解决