react-native 开发小结（Android）

在windows上开发react-native已经有一些时候了。做为一个Android原生开发者，在开发的过程当中，虽然有点蛋疼，但毕竟积累了一点点经验，再不说出来，我就要侧漏了......

1，前言

react-native开发使用的是JS,可是并非纯正的JS,而是一种JSX语言，就是在JS中嵌入XML语言，所以，只要有一些JS的语法基础的原生开发者，就能够肯容易理解JSX的语法了，在RN中，推荐使用ES6的语法。

对于JS而言，一切皆对象，函数也是对象，而对象的内部是经过key-value的形式来组成的，也能够说是经过json格式来组成。对象内部每个键值对（key:value）称做一个属性（RN中最重要的属性是state和props）。

2，性能

使用react-native开发的最大的有点在于开发效率，加入APP并不复杂的话，那么彻底可使用纯JS开发，也就是Android和iOS公用一套界面和逻辑。极大的提升了开发效率。在性能上，（Android中通常的操做）RN的表现比原生弱一些，可是远好于H5。因此整体来看，其实RN的将来仍是能够期待的。

3，RN运行机制简述

RN是运行JS的，Android是运行Java字节码的，因此，实际上JS代码的最终运行是经过一层封装，把JS的代码映射成原生代码，而界面上的元素最终使用的也是原生的组件，而不是本身渲染（因此在性能上，RN比H5要好不少）。

4，Component简介

在Android中，主要交互容器是activity或Fragment,而在RN中，界面的交互容器是Component：组件。我以为Component和原生的Fragment其实很像，都存在于activity中，都受制于activity的生命周期，均可卸载和装载。

4.1，Component生命周期

由上图可知，大体分三个过程：初始化，运行中，卸载。

• 初始化阶段：
  • 在新版的Component中ES6语法中，getDefaultProps,getInitialState 是不该该被复写的。RNAPI要求咱们props，state的初始化在Component的constructor函数中完成（props，state这俩大宝贝下文在作解释），所以在初始化阶段能够作的就是在constructor或者componentDidMount函数中完成相关初始化工做。
  • componentDidMount函数是组件第一次绘制完成以后被调用的，整个周期只被调用一次，在这里能够作一些网络请求操做等。
• 运行阶段：
  • 重点在于修改state内容，来刷新界面
• 卸载阶段
  • 在componentWillUnmount方法中作一些移除操做，或者什么都不作。

在这里，已经有前辈写出了比较详细的博文了，有兴趣请前往React Native 中组件的生命周期。

4.2，state和 prop

这两个属性之因此重要，是由于stat和界面的刷新有关，prop则和组件的封装有关。

state初始化在构造函数中，经过setState来修改里面具体的值。具体以下：

而修改state内容则是这样：

当state中的内容被修改后，当前组件就会按照生命周期来刷新页面，这样，全部和界面刷新的任务就所有交到state这一个属性手里了。这是一个很不错的设计。

而prop这个属性，则是用于封装组件的时候对外暴露组件的可输入属性。即就像这样：

就这样，封装组件中的全部你想暴露给别人输入的属性均可以定义在prop之中。

4.3，component间的跳转

在原生开发中，界面的跳转主要依赖Intent做为桥梁，而在RN中，则所有依靠Navigator这个组件来实现页面之间的跳转逻辑。

• initRoute这个属性指定了初始化的页面，在这个例子中，进入第一屏的页面将是TabBarView,
• configureScene这个属性用于指定默认跳转动画
• renderScene这个属性传入的是一个方法，根据获得的不一样的组件（component）来渲染不一样的场景。

Navigator这个导航器是全局的，整个APP中只有一个，会根据界面的跳转传递到每一个Component内部的prop中。Navgator会维护一个栈，这一点和原生的Activity的任务栈极其类似，能够对照理解。

• 数据传递 上面的代码中有这样一段：

< Component navigator = {navigator} route = {route}
        {...route.passProps} />复制代码

{...route.passProps}保证passProps里每一个key都会被视做prop的一个属性，具体以下：

跳转到SecondPageComponent界面

navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    passProps: {   //注意passProps和以前定义的保持一致
        msg:'ladingwu is handsome'
    }
});复制代码

而在SecondPageComponent界面界面中，这样来取数据：

export default class SecondPageComponent extends React.Component {

    componentDidMount() {
            //这里获取传递过来的参数
            var message=this.prop.msg;
        }
}复制代码

怎么样，简单极了吧。固然，在原生开发中，还有startActivityForResylt()这个方法能够再从第二个界面返回时获取数据，那么在RN中是否能作到呢？也很简单，依然是经过传递参数，只不过这个时候的参数，应该是一个回调函数（js中，函数也能够看成参数，一切皆对象）

跳转到SecondPageComponent界面

navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    passProps: {   //注意passProps和以前定义的保持一致

        getMsg:(msg)=>{console.log(msg)}
    }
});复制代码

而在SecondPageComponent界面界面中返回数据：

export default class SecondPageComponent extends React.Component {

    componentDidMount() {
            //这里获取传递过来的参数
            this.prop.getMsg('ladingwu is still handsome');
        }
}复制代码

不要太简单哦。。。。

5，总结

固然，RN还有不少能够说的，好比动画（性能有点感人），网络请求，数据存储等等，就不一一举例说明了。

说一点感想，使用RN开发这段时间，感受这玩儿确实能够提升工做效率，毕竟Android和iOS使用一套界面，并且不少功能在RN上都有完备的实现，基本上，只要APP的业务逻辑不复杂，或者并不涉及到不少硬件操做或对性能要求很高的话，使用纯RN开发是彻底能够的。假如H5是将来的话，那么在将来来临以前，RN才是更好的选择，固然，RN并不能彻底取代原生开发，由于它只是在原生和H5之间找平衡的产物，它固然好，但也不是最优解。

你是否是该学？

应该，即便只是冲着JS也要去学一把，现在，JS不只霸占了web端，还入侵了移动端和后台开发，我就问你怕不怕？

---

最后推荐几个学习RN必备网站：

React-Native中文站(非官方)

React-Native官方网站

江清清的技术专栏

google搜索引擎