ReactNative的核心竞争力（reactivenative）

之前前面给大家讲过ReactNative产生的一个大背景了，并且讲了和一些现有的Hybrid框架的一个对比。今天主要给大家说说ReactNative到底有什么优势，为什么要选择它。

1、原生打包（Android & iOS）

2、虚拟DOM

3、高性能的JsBridge

4、保留平台特性

5、FlexBox布局

1、原生打包（Android & iOS）

a.打包优化

b.不依赖平台webview性能

c.完全可控，无第三方打包依赖

之前我们的Hybird框架打包，Cordova打包，Ionic打包都是用Cordova这个东西来打包的，它要打包是要依赖webview的性能的，原生打包的方式打包出来的是原生组件并不是镶嵌在webview中的东西，所以好处就是不依赖平台的webview性能。通过原生打包我们可以做打包优化像安卓平台混淆、资源压缩...我们在原生APP可以做的优化，用ReactNative都是可以做到的。经常会有问到说这个Cordova和Ionic打包体积过大，这个是不好优化的，但是如果要用原生打包的话对原生开发者来说，打包优化这条完全就是无缝对接了和普通原生开发打包几乎是一模一样的。只是ReactNative比原生打包多了一个，要打包出bundle。这个打包是完全可控的，因为是自己打包，不依赖第三方，可以控制各种各样打包的版本，原生打包完全不影响第三方库的引用，也为Hybrid可以和原生开发混合开发提供了便利，不需要做太多操作就可以无缝衔接到ReactNative开发。

2、虚拟DOM

web性能瓶颈其中有一点就是DOM树性能瓶颈，DOM树过于复杂的时候进行渲染的时候就会渲染到真实的DOM，这个损耗是很大的，页面过于复杂，过度渲染的话就会出现卡顿现象，虚拟DOM是有一个虚拟的DOM树在维护着整个DOM，当DOM发生改变界面渲染的时候，Facebook会通过高效的diff算法算出来这个DOM树和真实的DOM树到底有哪些改变，然后只渲染改变的部分，这个就大大减少了DOM树过于复杂包括渲染的瓶颈的问题，这个是ReactNative非常非常大的一个优势，这点对性能的提升是很大的。我们在写UI的时候避免不了复杂的嵌套，但是有这个就不用担心了。

3、高性能的JsBridge

a.iOS：使用JavaScriptCore做Js解析引擎

b.Android:通过Jni层C/C++代码实现一套高性能的通信机制

c.不只是js与原生语言的互调

普通JsBridge就是通过Webview来进行js和原生代码的一个互调，这个JsBridge是在安卓iOS里是都有的。这里讲的高性能的JsBridge：iOS：使用JavaScriptCore做Js解析引擎，安卓里面并不是使用Webview而是通过Jni层C/C++代码实现一套高性能的通信机制。为什么要这么去做？在js和java进行互调的时候，写ReactNative的时候只要牵扯到原生模块都是异步操作，因为需要通过C这一层，C这一层完全复制了一份数据在这，Js访问平台的数据调用原生的方法，都是通过C来做的桥接，所有的数据存储都是在C这一层，只保留一份，这样要比Java高效安全的多。不只是Js与原生语言的互调，还牵扯原生的库、控件、UI模块和非UI模块对Js的桥接，不只是与原生语言互调。有人问，Ionic放弃了Android 4.1以下是因为Android 4.1以下Webview性能不好，ReactNative这一套东西既然跟Webview没有关系为什么还不支持Android 4.1以下版本呢？实际是因为在java层用了个API，是专门做UI高效绘制，相当于协同绘制的东西，是在4.1加进来的，老版本的话是没有的，所以才不支持Android 4.1以下的版本的。

4、保留平台特性

a.官方UI控件保留平台特性

b.根据不同平台原生UI与原生模块进行拓展

c.第三方库引入与管理

国内很多公司有这样一个现象，就是在公司里做安卓开发的小伙伴们拿到的设计师做好的图都是iOS的设计稿，安卓仿iOS控件这样的做法非常常见，其实是不推崇这种做法的，因为忽略了平台特性。facebook做框架的时候就保留了平台特性，符合平台特性的控件分别做了比如：webview ios webview android,alert ios alert android,保留iOS弹窗形式和Android弹窗形式...保留平台特性，这就是大厂的做法。根据不同平台原生UI与原生模块进行拓展，向js层提供统一API，js只写一次，但是在不同原生平台跑的是不一样的东西。JsBridge开出来之后，我们可以做自己的库自己的控件，授人以鱼不如授人以渔，facebook是把这种方式给贡献出来了，官方提供的控件是经常用的控件，我们可以按照官方控件一样的方式做拓展。ReactNative在与原生进行混合开发的时候，是不会扰乱我们的其他的第三方库，我们自己的引入和管理是不受干扰的。

5、FlexBox布局

a.与像素无关，适合移动端屏幕兼容

b.弹性布局

c.自适应

中文翻译过来就是css的弹性盒子，做前端的都会比较熟悉。做安卓开发的时候定宽、定高用dp，字体用sp,这样做的好处跟像素无关，这套UI能够在不同大小的屏幕上看到的是一样的，都是同样的视觉效果。使用这种方式在移动端上可以达到非常好的兼容效果，使用起来也非常简单。在APP中经常会遇到用户进行横竖屏切换这样的场景，弹性布局可以做到我们整个布局是弹性的，UI在屏幕上发生变化的时候，不会被挤压不会被失真，而是会弹性的充满。比如flexbox里面有个属性叫flex，它是个非常重要的属性，它做什么事情呢，可以进行横向、纵向弹性填充。自适应这条其实和弹性布局没有特别明显的界限，只需要把布局写好让他去在不同屏幕自适应就行了。

感谢关注，评论，转发！