本节书摘来自异步社区《微信小程序开发入门精要》一书中的第1章，第1.2节原生热布局，作者 李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.2　原生热布局
尽管本书的主题是微信小程序，但这里还要提一下原生热布局的概念。由于目前移动平台主要有Android和iOS，但这两个平台使用的开发技术完全不同（前者主要使用Java，后者主要使用OC或Swift），所以就需要有一种可以同时开发两种平台的技术，这样理论上可以节省一半的开发成本。

以前比较流行的技术是混合开发（Hybird），这种技术很简单，就是HTML5+CSS+JavaScript的结合。和木桶原理一样，木桶装多少水，是由最短那个木板决定的，而在这三者组合中，HTML5就成为那个短板，降低了Hybird的整体性能。

对于Hybird技术，我们只需要其中的两个优势：跨平台和热更新。跨平台很好理解，各个平台都会有Web浏览器，而热更新主要是逻辑代码和UI布局的热更新。在逻辑代码方面，热更新用JavaScript，这里主要讨论UI布局的热更新。在Hybird时代，使用的是HTML5和CSS，它们进行热更新没问题，但性能有问题。如果把HTML5组件和原生的组件放到同一个窗口，就可以感觉到它们的不同。所以现在的主要焦点在于UI布局可以实现热更新，性能达到或接近原生组件。HTML5达到了前者的要求，但没有达到后者的要求。我们知道，Android布局使用了Layout，iOS布局使用了storyboard，不管是哪种技术，都不支持热更新，都是固化到apk和ipa文件中的。不过这两种技术都支持动态创建组件，所以React Native率先推出了利用JSX描述组件的位置、尺寸以及其他属性，然后再根据这些属性动态创建本地组件的技术。JSX会生成一种中间状态，我们可以称为虚拟DOM（Virtual DOM），其实就是一种中间组件而已，然后系统会根据运行平台的不同（Android或iOS），将其动态生成不同平台的原生组件，这样很容易实现热更新。因为JSX就是个普通的文本文件，可以很容易地从网络上下载，这一点和HTML5相同。由于组件都是动态创建原生的，所以和在Layout、storyboard中定义的静态原生组件的性能相同，因此，很容易解决前面描述的问题。我们也可以把这种利用XML或其他格式描述UI布局，并实现动态生成原生组件的技术称为原生热布局。

微信小程序借鉴了React Native的原理。不同的是，React Native是通用的，而且可以随意扩展。而微信小程序必须运行在微信提供的架构上，是一种寄生的原生热布局。

除了React Native和微信小程序，还有阿里巴巴的Weex，这是阿里巴巴前端团队发布的一个开源框架，有兴趣的读者可以到http://alibaba.github.io/weex这个地址研究这些框架。也是用了类似Virtual DOM的技术，可以三位一体（Android/iOS/HTML5），React Native对应的React.js可以生产HTML5，微信小程序理论上也可以。希望以后能推出类似的技术，在开发微信小程序的同时，也可以同时开发基于HTML5的微信公众号（目前腾讯推出的最新小程序IDE已经支持类似的功能了，不过功能不算太强）。

通过原生热布局的应用，App的性能完全可以和原生App（其实就是动态生成的原生组件）相媲美，目前已经有很多类似的框架问世，以后可能会更多。相信这些原生热布局的方式会在今后很长一段时间内成为跨平台开发的主流，因为它的“颜值”实在太高了！