用React写flutter app

豆皮粉儿们，大家好呀，今天这一期，由字节跳动数据平台的“奕轩”同学给大家带来如何用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