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

作者：奕轩

基本概念

flutter

谷歌推出的挪动端框架，特点是多端高度一致性，性能好，蕴含丰盛的安卓和 ios 格调的组件，应用 dart 作为开发语言

长这样⬇️

mxflutter

一句话：让 js 以 dart 和 flutter 的模式写 app

长这样⬇️

https://github.com/mxflutter/…

react

react 架构  援用自 Remax – 应用真正的 React 构建小程序

关键点

1. ReactReconciler 保护 VirtualDOM，fiber 算法，决定 VirtualDOM 的所有更新
2. 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 映射的问题，还有以下问题须要被解决

1. DOM：还须要反对 selector
2. BOM：编译时替换为 app 框架上的对象
3. 第三方包：初步构想是各平台保护本人的包，或应用 web-component
4. 事件处理：还没想好

The End