豆皮粉儿们，大家好呀，明天这一期，由字节跳动数据平台的“奕轩”同学给大家带来如何用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等
长这样⬇️
Bridge
Bridge的作用是桥接ReactReconciler和mxflutter，当VNode有更新时，VNode持有的Bridge将diff node更新到mxflutter
将来
咱们的指标是现有我的项目能够通过越少越好的批改能跑在app上，
上述原理只解决了dom映射的问题，还有以下问题须要被解决
- DOM：还须要反对selector
- BOM：编译时替换为app框架上的对象
- 第三方包：初步构想是各平台保护本人的包，或应用web-component
- 事件处理：还没想好