React Native, Flutter的使用记录
前言
本文是博主作为一名前端对RN，Flutter和SwiftUI轻度使用的感受，以及学习过程中碰到的一些问题和解决办法。因为之前并没有接触过原生开发，所以可能存在很初级的问题，或者用笨拙的方法解决了问题，或者内容有错误，有读者发现明显错误的，欢迎评论区指出。
（组件，控件，widget）
React Native
首先是React Native，’Learn once, write anywhere’. 对于前端而言最为亲切的跨端框架，JSX + 弱化版的CSS能够像前端开发一样直接书写移动端应用。
原理简介
基本原理如图
React的虚拟dom出口：
- web中的document对象，通过浏览器完成渲染（渲染引擎Webkit/Gecko）。
- 以Bridge作为通信中介的原生组件映射，在原生平台渲染。
第二点这也是Native的名称含义-原生渲染。关键点在于虚拟DOM和原生组件中的DSL的实现。如何抽象出不同平台的原生组件的公共部分封装成组件库？然后虚拟DOM如何按照预期地影响原生组件？这中间的适配迭代过程中的开发问题，看过去几年的RN话题的讨论记录和github中总共2w的issues数量和Airbnb放弃RN时发的5篇记录Airbnb使用记录，可见一斑。
使用
用RN写普通页面和前端开发并没有太大的区别， 只不过从浏览器的DOM标签变成了RN封装的基础组件。需要根据样式和业务逻辑切分和复用组件。
网络请求
- 支持Fetch，可以用Promise自行封装.
- 支持AJAX, 所以封装AJAX的第三方库比如axios也能使用.
存储
KV存储也有官网的AsyncStorage
原生联系
React Native 可以通过原生模块的方式来通过Bridge异步地和原生代码进行通信。RN中很多库都十分依赖原生，毕竟本身就是对原生的抽象，所以React Native与原生开发密不可分，采用RN大概率需要混合开发。
Flutter
Flutter近两年热度最高的跨端技术（issues一直增加）。
原理简介
它采取的方法是将Dart编译成原生系统的可执行程序，控制应用的每一个像素，用Skia绘制并渲染UI，并添加相应的交互逻辑构成部件–Flutter这里是叫Widget。因为部件的渲染和逻辑都是Flutter来完成，所以Flutter能够保障不同平台，不同设备UI的一致性。并且本身就提供了Material 和Cupertino两套类原生风格的控件实现，也能保障原生UI的使用体验。当前已经支持Android、iOS、Windows、Linux、Web。
基本架构如图
使用
Flutter的很多地方都和React类似, 都是状态更新setState(), 然后触发UI更新.
常用的UI相关的Widget有两种
- StatelessWidget: 不维护State
- StatefulWidget: 通过createState创建State, 在State类中通过setState((){ statement })更新状态.
网络请求
Dart IO库中可以创建HTTP请求
1 | HttpClient httpClient = new HttpClient(); |
另外有非常优秀的第三方开源网络库DIO, 可以省下自己造轮子的时间.
但是作为JavaScript使用者, 注意Dart处理JSON文件不能像直接转换成对象. 这里最好是约定好数据格式, 类似ORM的思路创建对应的Model类, 写好转换逻辑.
存储
KV存储有shared_preferences, Android和iOS都能够适配, 使用也较为简单就不赘述, 具体直接看文档
状态管理
Flutter这里思路与RN的处理也是非常类似, 对应ReactNative中的useContext, Flutter中有专门的状态共享部件InheritedWidget 能够自上而下的数据共享. 在根Widget中使用InheritedWidget共享状态, 其它Widget都能通过获取该状态. 这里可以使用基于InheritedWidget封装的库Provider来直接使用封装好订阅发布的功能.
结合Redux状态容器辅助理解, 其实也是Elm的架构逻辑.
主观的感受
- 在书写体验上，RN使用TSX既能快速开发出页面，又能享受TypeScript的保障，单单就写UI而言能保持和前端基本一致的体验。而Flutter的Dart开发过程中的层层嵌套，真的是很让人崩溃，真希望能赶紧出个DTX（据说有提议）。
- 在生态上，RN先出来这么久，各种问题和需求都能找到经验参考，而Flutter还处于快速发展，看看8k的open issues，意味着它还有很长的路要走。
- 从技术吸引力来说，Flutter完全掌握渲染部分显然更加吸引人，类似游戏引擎的结构，理论上可以自己添加新的一套UI+逻辑，就像弱化版的浏览器一样。RN就期待着新架构能早点使用起来。
- React Native真的需要对原生开发有所掌握，这方面还需要继续加油。