小程序原理及RN与Flutter的对比

小程序
小程序的底层原理

小程序的呈现模式是 WebView + 原生组件，Hybrid 方式
双线程原理

双线程模式是小程序的最大特点

小程序的渲染层和逻辑层分别由 2 个线程管理：渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS 脚本。

逻辑层： 创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码
渲染层： 界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程

微信小程序的底层原理

微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口
微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现
小程序分为两个部分 webview和 appService 。其中 webview 主要用来展现UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

在某种程度上，它也限制了开发者的权限：

• 不允许开发者把页面跳转到其他在线网页
• 不允许开发者直接访问DOM
• 不允许开发者随意使用window上的某些未知的可能有危险的API
小程序跨平台互转的原理

抹平多端语法差异
实现多端之间投放，码路由
小程序生命周期函
微信小程序生命周期
小程序 & H5 & App
小程序是类Vue的开发，但是还是和Vue有着很大的区别：

生命周期(小程序的生命周期更简单)
数据绑定的方式（小程序, vue则是:value）
事件处理方式 （小程序全用 bindtap(bind+event)，或者 catchtap(catch+event)绑定事件, vue：使用v-on:event 绑定事件，或者使用@event绑定事件）
控制元素的显示和隐藏（小程序wx-if和hidden,vue则是v-if和v-show）

React Native & Flutter

React-native的框架原型图

Flutter的框架原型图