分享经验与经历

对于前端的打包工具有webpack(大而全，图片代码打包)，rollup(专攻代码打包,框架场景常见)等，既然有这些打包工具为什么还要在移动端搞一个metro，其中一个原因为ram bundle，iOS采用indexed ram bundle读取一个文件效率更高,Android采用file ram bundle。那么接下来了解一下metro。Metro生命周期。

从Android团队开始宣布放弃Eclipse转投Android Studio时，构建工具Gradle进入了Android开发者的视野。而随着热修复、插件化、编译时注解的流行，深入了解Gradle就变得很有必要了。那么什么是Gradle？Gradle是一个基于Ant构建工具，用Groovy DSL描述依赖关系的jar包。我们都知道早期的Android开发使用的是Eclipse,而Eclipse的构建工具使用的是Ant，用XML描述依赖关系，而XML存在太多的弊端，不如动态语言。

  在阅读GNU make构建工具相关资料的时候，一直在思考几个问题  其实如果不回答上面三个问题，并不会对我们学习Makefile语言有什么障碍。但是笔者个性使然，就是想要把这些关系梳理清楚再去学习其中的语法。  先来回答第一个问题，阮一峰在他的博文中认为build叫做构建，compile叫做编译，参考这个Make 命令教程。所以我认为“ build system ” 叫做构建系统，而构建工具是构建系统中的一部分。构建工具有很多种 ：成熟大型项目常用的make ，Android平台开发

屏幕的刷新率为60hz，在接受到vsync这个信号之后会处理一下事情然后通知Choreographer，Choreographer会主线程doFrame这一帧，在下一次vsync来临之前得提前将frame写入buffer供屏幕使用，在这一帧里面会通知UI有四种类型的需要回调。其实如果帧率一直是50fps这样稳定还看不出掉帧，比较明显的掉帧是帧率不稳定，一会50fps一会60fps再一会40fps掉帧的感觉就会比较明显。其中处理一条message消费的时间即为一帧的消耗。关注公众号：未知思考。

在measure阶段从根节点开始dfs measure，每一个父节点会计算子节们点给的layout params(width、height、margin等)和自身的一些情况总结出一份新的宽高测量specification，然后在递归传给子节点们，当一个每个节点measure完成都会给被打上PFLAG_MEASURED_DIMENSION_SET的flag标记并且确定宽高(measure得到的宽高只是理想状态的宽高，还需要经过layout才会确定最终宽高)。由于事件分发代码较多，我们这里用伪代码来简化一下。

在2022年react native的团队规划中，做了一次大的技术改造，将shadow树在cpp中实现，react采用fabric，整个渲染流水线发生了较大的变动。实例化FallbackViewManagerSetter对象的时候，会扫描ViewManager带有ReactProp注解的方法，并保存到ViewManagersPropertyCache的map中，当在setProperty刷新每个属性时，就会调用其对应的方法进行正在ui更新。React Native渲染场景我们分为初次渲染与状态更新。

这个调用链都是在js线程完成的，也就是会阻塞js线程，如果不想阻塞js线程，可以采用异步的方式，promise或者async/await，异步的方式会将模块与函数的信息存到queue，flush到cpp层(global.nativeFlushQueueImmediate)，flush间隔不能小于5ms。通过codegen会自动生成cpp与java的turbo接口代码，java侧的TurboModule的接口签名信息与函数地址会被存储在cpp层的TurboModule#methodMap_中.

我们主要关注的是有 CatalystInstace 负责的 js bundle 加载过程，这里我们需要说明一下，单单从 CatalystInstace 名字我们就能知道其职责，催生一个 React 应用实例，其是一个混合对象，一部分是由 JVM 堆分配的 java 对象，一部分是由操作系统分配的 cpp 对象。当实例化一个 CatalystInstanceImpl 对象之后，会在构造器中，初始化 native 到 js 的桥，在这条桥上游两条消息通道，一条通往 js，一条通往模块调用。

知道了这些事之后，我们可以来做个大概的总结，其实React Native框架就是我们平时的原生开发通过libjsc.so等库去解析bundle（许多JavaScript文件的打包文件，为了提高性能所以进行了打包），而Java和JavaScript的交互就是通过这一层所谓的bridge完成的。说完这些知识点，我们就知道了其实React Native的存在就是为了让原生开发的一套规范转换到Web开发规范，既然换了一种开发方式就意味着你要学习Web开发的相关知识，这里推荐一篇博文供大家入门前端开发，