上篇就做了个初始化，这次来点实际的。
写RN我建议用webstorm，很强大的一款IDE。打开我们的项目：
简单看一下项目结构：
__test__: jest单元测试，表示没耍过。
android: 安卓项目文件
ios: iOS项目文件
node_module: 依赖库
余下的是一些配置文件以及项目入口文件 index.xxx.js。我们上篇之中运行的代码其实就是index.ios.js中的代码。
说到代码，不得不说一下RN的语法了，RN顾名思义就是用React写Native App，React使用jsx编写，就是js+xml，没什么特别高端的地方。这里我们大部分使用ES6的语法来写js。
1、组件
一开始就开始说组件不知道会不会太快，组件是什么？我个人理解就是一个可重复使用的模块，Don‘t repeat yourself，不要写重复的代码。
react中的组件称之为Component，这是react提供的一个基类，我们写的所有组件其实都是继承自Component。
我新建了一个Treasures的项目，react生成的index.xxx.js中就写了一个与项目同名的组件Treasures，这个组件是作为app 入口组件，文件底部写了注册app接口：
AppRegistry.registerComponent('Treasures', () => Treasures);
2、组件的生命周期
constructor: 构造器，这里最主要的功能就是初始化组件的state。
componentWillMount: 渲染之前，做数据请求即处理喽，以便后面渲染出来。
render: 渲染(必须)，没什么可说的，别忘了return。
componentDidMount: 渲染完成后，这个再React Web端是非常用的，可以用jquery处理组件，但是再RN中，可能就是一下小处理了。
componentWillUnmount: 移除组件前，移除组件的时候有时也需要处理一些东西吧哈哈。
简单的开发主要用到上面这几种，还有其余的生命周期函数我们用的的时候再说。
3、props & state
props和state可谓是react里的精髓了，通过props在组件之间传递数据，通过state动态改变组件。什么意思呢？先说props，我们写一个组件比如说一个Button，组件名叫MyButton
<TouchableHighlight style={{backgroundColor: '#FFFFFF'}}>
<Text>我是Button</Text>
</TouchableHighlight>
我在别的地方调用这个<MyButton />就会出现一个黑色的按钮。但如果我想要白色的按钮呢？这TM就尴尬了。。。所以我们需要把color作为props，这样别的地方就可以通过给这个props值来生成不一样颜色的MyButton。如下：
<TouchableHighlight style={{backgroundColor: this.props.color}}>
<Text>我是Button</Text>
</TouchableHighlight>
这个时候我们需要这样调用:
<MyButton color={'#000000'} />
这样就可以想要什么颜色就有什么颜色的button了，Nice！
再说一下state吧，我们又一个选数量的组件，就像这样：
我点减号中间的数字减1，点加号加1。这个组件很常用，我希望把它写成一个组件，怎么写呢：
... <Text> {this.state.num} </Text> ...
左右按钮就不写出来了，分别是点击之行plus和minus函数，我们看一下plus函数怎么写：
plus(){
this.setState({
num: this.state.num + 1
})
}
这里要注意的是state必须通过setState来改变，这里面牵扯到React内部的机制。这样就实现了我们所需要的，并且在点击的时候只刷新了中间的数字。这就是典型MVVM设计思想，不得不佩服。
讲到这其实React中的组件不管是在Web还是Native都是一样的。差别就是Web端可能是用<div>这样的标签，我们也可以理解为组件，RN中是用View组件。
这一部分就说到这吧，顺便说说这个组件的思想。我们在React中所有展现出来的都是基于Component，大到一整个页面，小到一个按钮。一个组件就是一种标签，如何细分组件就是一门艺术了哈哈哈哈哈。下次我们再说点别的哟西！
网友评论