React Native

React Native

大家好，今天跟大家分享的主题是《从iOS到React Native》，接下来的内容主要分为四个方面：

1. 弄清几个概念：React、React Native及其原理
2. 写简单Demo： 跳转、UI、数据、生命周期
3. 推荐的入门路径
4. 目前的一些问题和困扰

React 、React Native概念

React

现在app有很多新兴的概念，我们先把React Native的相关概念问题搞清楚。首先介绍一下React。

在几年前，Facebook的工程师在开发中对当时市面上所有的前端框架都不满意，就决定自己写一套，用来架设 Instagram 的网站,起名“React”。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。目前很多公司的网站前端也是全面铺开React框架。

React有两个非常出色的地方:

1. 虚拟DOM
2. 数据的单向流动

虚拟DOM

我们先看下虚拟DOM的示意图：

我们知道，web中的UI和数据都是放在DOM树中的。按照正常的DOM思维，如果我们先要刷新DOM树的b节点，那么会向DOM树发出刷新b节点的命令，但是在刷新的时候，也会把b所影响的其他的节点一起刷新，造成刷新实际过程非常复杂，时间也会较长。我咨询了一下web的开发，其实在开发中是有办法去单独刷新b节点的，但是因为涉及到的逻辑比较多，会占用一些开发时间，所以很多的人就选择简单的让DOM树刷新b节点。

React提供了虚拟DOM的思维来解决这个问题，本质上是“以空间换时间”。它会在系统中生成预期刷新后的DOM树，然后和当前的DOM树做一个diff操作，然后只刷新需要改变的DOM节点，极大地提高了DOM树的刷新速率。

数据单向流动

React第二个非常出色的地方就是数据的单向流动。当然，这个并不是React的标配和发明，是开发者在使用过程中，发现数据单向流动有利于设计，所以使用了数据单向流动的思路。

我们在写界面的一些UI或者交互逻辑的时候，经常会出现多个控件互相去修改UI属性或者修改数据的情况，如果页面的逻辑比较多，或者页面的层级复杂的时候，就会发现修改状态等的逻辑到处都是，对于后面的拓展或者是修复bug等都造成了困扰。
而使用数据单向流动这套逻辑， 你不用关系具体的View如何变化，而是修改View绑定的数据，当你使用React提供的方法去修改View的时候，它会自动调用渲染（render）方法，然后通过刚才讲的虚拟DOM的原理去更新UI。

这套方案，极大地降低了逻辑的复杂性，让大家能够将更多的精力花在数据上面。而且将渲染（render）的方法收了口，每次的渲染都在同一个入口，也方便调试。

React Native

我们的发版计划，受到很多的制约和限制，主要是AppleStore的审核，经常会出现各种各样的问题导致版本审核不通过，会打乱运营的一些推广计划或者促销计划。而且审核也需要几天的时间，导致很难及时地更新app内容。另外如果出现了紧急的bug，虽然我们有热修复，但是效果毕竟还是差了些。大家都希望能随时随地更新app中的内容，减少发版时间的束缚。

为了实现这个目标，出现了各种各样的解决思路。前段时间有一个比较火的概念：”hybrid“，其主要思想就是app提供一个”壳“，里面放webView，所有的页面都是h5的。这样就做到了，随时更新内容，并且开发一套代码，可以iOS、android、h5通用࿰