React Native

一、react框架简介：

1. 是一个用于构建用户界面的JavaScript库，主要用于构建UI，只专注于实现MVC中View层面的实现
2. 特点：
   1. 声明式设计：使用声明式的编成方式，使得react逻辑足够简化
   2. 高效：采用Virtual Dom(虚拟dom)，减少与dom间交互的花费
   3. 灵活：可以与已知库或者框架很好的配合
   4. JSX：执行速度快，类型安全、在编译过程中就能发现错误，像XML的JavaScript语法扩展，编写速度快，建议使用(非必要)
   5. 组件：是用户界面的最小元素，与外界的所有交互都通过state和props进行传递；通过构建组件，使得代码更容易得到复用；生命周期：mounting已插入真实dom、updating正在被重新渲染、unmounting已移除真实dom
   6. 单向相应的数据流：所有数据流从父节点传递到子节点，假设数据通过props传递到子节点，如果想对父节点传递的props值改变了，那么其所有的子节点都会重新渲染，使得组件够扁平化、更易于维护；减少了重复代码，比传统数据绑定更简单
   7. 快速开发：有大量开源框架与组件可供使用
3. 底层原理：通过在框架底层设计了一个虚拟dom，与真实dom映射，当业务逻辑修改了react中的state部分，react框架底层的diff算法会与页面dom比较计算，更新差异部分，这也是高性能的原因（传统HTML页面更新，会将整个页面重新加载实现重绘）
    
4. react和states：
   1. react把组件看成是一个状态机，通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致
   2. react里只需要更新组件的state，然后根据新的state渲染用户界面，不需要操作dom
   3. props：从外界传入组件的参数，不可变，但state可以根据用户交互来改变，某些容器组件需要定义state来更新和修改数据，而子组件只能通过props来传递数据
   4. state中应该保存可能被事件处理改变并触发页面更新的数据，比如说"用户输入、服务器请求、延定时变化等"；props支持大部分组件取数并渲染出来

二、React Native

1. 在原生层收集事件产生的数据，串行处理后通过桥接层传给JavaScript层，JavaScript层收到拿到数据后并处理生成一系列指令(由整型、字符串等数据类型构成)，同样通过批量串行处理回到原生层，最后原生层处理指令生成UI
2. 渲染在react框架，JSX源码通过react框架最终渲染到了浏览器的真实dom中，而在react native框架中，JSX的源码通过react native框架编译后，通过对应平台的bridge调用原生框架中的方法
3. 启动：并行完成以下三个任务
   1. 加载JavaScript打包文件，将代码及全部依赖全部打包成单个文件
   2. 同时，react native开始加载加载原生模块。一旦某个原生层完成加载就在桥阶层注册，桥阶层确认该模块，此时整个应用就会知道该模块已可用，并能创建该模块的实例
   3. 启动JavaScript虚拟机，提供JavaScript可运行环境
4. 原生模块和JavaScript执行环境准备就绪后，引用加载JSON配置文件(模块数组、常量导出模块及模块的方法，当请求原生模块并调用方法时，JavaScript会读取该文件并在执行环境中创建对象)，然后执行JavaScript打包文件，创建shadow视图来渲染应用的布局，shadow队列把flexbox这样的属性转换成绝对位置和大小。与此同时创建原生视图来渲染应用，最后结合两者将整个引用渲染在屏幕上
5. 与原生平台通信：采用JavaScriptCore作为JS VM，中间通过与JSON文件与Bridge进行通信
6. 注意点：组件间的层级不可太深(一级级传递)，避免通信冗长，体验差
7. 优缺点：
   1. 支持热更新：RN js编写完业务代码后，听过react-native bundle命令，将代码分别编译程一个index.android.bundle，index.ios.bundle文件分别放到安卓、iOS原生工程里，启动app的时候会第一时间加载这个文件，热更新的时候更新bundle文件即可
   2. 跨平台：但无法完全实现一套代码，很多组件及API依然区分安卓、ios
   3. 相比较于原生平台，开发速度快，相比于hybrid框架，性能更好
   4. 缺乏安全稳健性，不够成熟，发布新更新的时候，更改升级工作量大 
   5. React Native在渲染初期需要消费大量时间来初始化运行，因为JavaScript线程需要初始化

三、Flutter

1. 与RN相似，但比RN更近一步，更彻底实现了跨平台，既不采用WebView也不用JavaScriptCore，自己实现了一套UI框架，然后直接在底层渲染系统上画UI，开发语言采用Dart(可直接跟原生通信)
2. RN、Flutter、原生
   1. 包体积：原生最少，RN和Flutter不相上下，后两者含有原生库，所以比原生大，其中ios系统需要引入sika库，所以最终包Flutter会明显大于RN的
   2. 启动时间：Flutter>RN，RN和原生差不多
   3. 内存占用：原生最低，RN不稳定，页面刚生成的时候比较大，高端手机Flutter占用内存最高，低端手机RN最高
   4. CPU占用：RN明显高于其他，这样会导致手机性能降低、耗电量增加、发热更厉害
   5. 主观感受：flutter比rn流畅，但都比不上原生

四、优势

1.  与native对比
   1. 降低包大小：将编译产物上云，压缩包大小
   2. 双端一套代码实现，提高研发效率
   3. 发版效率提升：代码和资源上云，可以使发版效率提升，更快拿到ab数据等
2. 与yoda对比：
   1. 原生功能体验接近于优秀，渲染性能快，体验好
   2. 社区更强大
3. KRN：
   1. 业务接入：接入sdk（主站、三方app接入、AB试验能力、双端一致性等）、bridgeCenter（能力补齐，需求规范、公司级组件，三方app接入等）、容器（全屏、半屏通用容器、yoda容器对齐，双端一致性，通用降级支持，4tab接入）、工具提供（kds大学、官网、RN转web、team专项、机器人）、服务、
   2. 基建和能力：发布系统（支持分包、基础包动态更新、一键多发，数据治理，流量治理等）、引擎管理（引擎复用、多引擎、V8接入&统一）、运营监控系统（常规监控指标、白屏监控等）、组件生态、开发工具、vue能力建设（文档站、组件库、vue前端框架等）、动画能力支持
   3. 质效优化