React Native开发小结
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生命周期
参考文章
4.2 state和 prop这两个属性之所以重要，是因为stat和界面的刷新有关，prop则和组件的封装有关。 state初始化在构造函数中，通过setState来修改里面具体的值。具体如下：
而修改state内容则是这样： 当state中的内容被修改后，当前组件就会按照生命周期来刷新页面，这样，所有和界面刷新的任务就全部交到state这一个属性手里了。这是一个很不错的设计。 而prop这个属性，则是用于封装组件的时候对外暴露组件的可输入属性。即就像这样： 就这样，封装组件中的所有你想暴露给别人输入的属性都可以定义在prop之中。 4.3 component间的跳转在原生开发中，界面的跳转主要依赖Intent作为桥梁，而在RN中，则全部依靠Navigator这个组件来实现页面之间的跳转逻辑。
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中，函数也可以当作参数，一切皆对象）
navigator.push({
name: 'SecondPageComponent',passProps: { //注意passProps和之前定义的保持一致
getMsg:(msg)=>{console.log(msg)}
}
});
而在SecondPageComponent界面界面中返回数据：
export default class SecondPageComponent extends React.Component {
componentDidMount() {
//这里获取传递过来的参数
this.prop.getMsg('ladingwu is still handsome');
}
}
|