共计 1432 个字符，预计需要花费 4 分钟才能阅读完成。
豆皮粉儿们，大家好呀，明天这一期，由字节跳动数据平台的“奕轩”同学给大家带来如何用 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
- 事件处理：还没想好
