React Native跨平台初探

    React Native的移动跨平台解决方案，从实际效果上来说，是最好的。它集中注意力于Android和IOS，将JavaScript语言描述的组件，转化为平台对应的控件。对于平台来说，这和运行普通的App没有区别。对比Flutter独立的UI绘制，它不需要额外加载UI绘制so库。冷启动效果，几乎达到了原生的性能。

(1)综述

    React Native来源于Web开发的JavaScript React库，扩展移植到移动平台。它使用JavaScript作为开发语言，并进行组件渲染。渲染的线程是一个特别的线程，叫JavaScript线程，它和UI主线程不是一个。JavaScriptCore引擎就是工作在这个线程。这一点和Flutter不同，Flutter是工作在主线程的。
    这个线程的作用是，将JS描述的组件，翻译为原生的控件，并处理状态变化、数据传递、触摸事件、手势等。用户的点击，会先经过该线程的处理，回调设置的方法，然后再通过异步的方式，把数据更新到UI主线程，刷新界面。
    这个过程涉及到线程切换，而且JavaScript线程本身也有代码要运行。和纯的原生应用相比，性能肯定是有所下降的。在那些页面不是很复杂，更新不是非常频繁的情况下，损失的性能可以忽略，用户也感知不到。还有一个特点是，如果JavaScript线程因处理一些耗时任务被阻塞，是不会影响UI线程的，也就是说不会影响滑动等效果。而在UI更新频繁、涉及连续触摸事件等情况下，比如K线图中，拖动各种线条并且UI还有对应的变化的场景，因为需要大量的线程切换，丢帧的情况肯定会不少的，效果也就没有原生那么丝滑。当然，这种情况可以通过平台相关的控件加以解决。

(2)主要目录结构

    按照官方的文档，创建React Native Project。它主要的目录和文件如下：

• android：android project所在目录；
• ios：ios project所在目录；
• App.js：js文件，界面UI在这里进行创建和管理，它是跨平台界面的入口；
• index.js：js文件，React Native应用在Android上的入口文件，老版本是index.android.js。

(3)与平台的交互方式

    React Native与原生平台的交互方式、集成方式比Flutter更丰富。不论是Activity级别、Module级别、自定义控件View级别，还是Fragment级别，都可以支持。相互之间的通信，从属性到方法，都很方便，只需要加上特定的React注解即可。这一点提供了非常大的灵活性，对于某些性能要求高的场景非常适用。如平台自定义的View、SurfaceView、TextureView等都可以无缝衔接，而几乎不影响性能。只在必要的情况下，由这些View发送一些消息到JS端即可。
    React Native还可以支持Activity生命周期、Key事件的监听及交互。
    这些细致的集成粒度，虽然损失了一些跨平台特性，但对性能非常有帮助。React Native没有Flutter冷启动非常慢的弱点，这一优势是决定性的。

(4)限制

    React Native跨平台的限制和Flutter几乎一致。能支持跨平台的、需要单独开发的，都差不多。这里不再列出，感兴趣的朋友可以去看看《05_Flutter跨平台初探》。说得更直白一点，React Native和Flutter能支持View层、Data层的跨平台。对于和平台紧密相关的，都需要各自开发。不过它们的实现方式各异，Flutter有一些开源的插件可用。
     Over ！