斗皮粉们，大家好，今天一期，字节跳动数据平台的“艺轩”来带大家看看如何用React写flutterapp。作者：YixuanFlutter的基本概念是Google推出的一款移动端框架。特点是多端一致性高，性能好，丰富的Android和ios风格组件，使用dart作为开发语言。用flutter的形式写一个app是这样的??https://github.com/mxflutter/...reactreactarchitecture引自Remax——用realReact构建小程序要点ReactReconciler维护VirtualDOM，fiber算法，决定VirtualDOM的一切更新VirtualDOM渲染由各个渲染器实现：react-dom,react-nativeComponent组件宿主组件是宿主能理解的最小单元组件，浏览器是div,span,h1等，react-native是View,Text,Image等，host元素是由宿主组件或其他复合组件组成的字符串复合组件。它是使用React.createElement创建的类组件或函数componentElement对象，用于描述一个视图节点。可以理解为一个组件的实例，长这样??基本实现思路是定义一个虚拟节点类VNode，并定义VNode的append、remove、insert等方法，使用react提供的api-reconciler在创建节点、插入节点、更新节点等界面更新VNode。这样，每次ReactReconciler更新VirtualDOM，我们就可以知道更新了什么，并将更新的内容转换成我们知道的结构，维护一个VNode树，用它来渲染widget树具体流程的初始代码??React.createElement??ReactReconciler+VNode=NodeTree??递归渲染??以上过程的核心就是如何将一个react元素树转化为我们可以递归的节点树流程图。react-reconcilerreact-reconciler可以被认为是一组钩子（类似于git钩子，非React钩子），来填充它暴露的这些生命周期函数，你可以将React应用到任何“宿主”系统。那么react-reconciler是做什么的呢？vDOM树是在第一次渲染过程中构建的。稍后需要更新时（setState()），diffVirtualDOM树被更改，节点更改被更新（补丁）到NodeTree。VNodeVNode是VirtualDOM的最小单元，在react-reconciler的hook方法中创建一个VNode，插入一个子VNode，删除一个子VNode等。??BridgeBridge的作用是桥接ReactReconciler和mxflutter。当VNode更新时，VNode持有的Bridge会更新diff节点到mxflutter。未来，我们的目标是现有的项目可以越少越好，修改后可以在app上运行。上面的原理只解决了dom映射的问题，还需要解决DOM以下问题：还需要支持selectorBOM：编译时替换成app框架上的object第三方包：初步思路是各平台维护自己的包，或者使用web-component事件处理：TheEnd还没想好
