RNAPPGithub
学习课程：
《双平台真实开发GitHub App React Native技术全面掌握》399 大洋，含着泪吃了一个月泡面..
Github 代码库：https://github.com/ReverseScale/RNAPPGithub.git
知识点：
- 1.整理 ReactNative 网络封装及常用的三方模块
- 2.ReactNative 的 AsyncStorage数据库技术、离线缓存
- 3.ReactNative 的数据 DAO 层设计技巧，数据状态实时更新
- 4.ReactNative 的代码提取技巧，组合模式应用技巧，数据异步刷新与动态添加
- 5.ReactNative 的版本升级、数据统计、社会化分享、第三方登录，热更新等
- 6.ReactNative 项目发布前的优化、打包与上线
目录结构：
生命周期及使用场景
常用方法：
- constructor:
- componentWillMount:
- render:
- componentDidMount:
- componentWillReceiveProps:
- shouldComponentUpdate:
- componentWillUpdate:
- componentDidUpdate
- componentWillUnmount:
1.constructor:
在组件创建的时候调用一次,这个方法进行this.state初始化状态机。
constructor(props) { super(props); // 初始状态 this.state = { isShow:true }; }
2.componentWillMount:
在组件生命周期中只会被执行一次,在初始渲染(render函数)前被执行。 注意:
- 如果这个函数通过setState函数修改状态机变量,RN框架不会额外执行渲染(界面刷新)
- 如果子组件也有componentWillMount函数使用,会在父组件之后调用
- 需要从本地存储中读取数据用于显示,常用这个函数
3.render:
该函数组件必有的，通过返回JSX或其他组件来构成DOM，换言之，就是组件的核心渲染过程。
4.componentDidMount:
在React Native组件的生命周期中,这个函数只会被执行一次，它在初始渲染完成后会马上被调用。在这之后开发者可以通过子组件的引用来访问，操作任何子组件。 如果RN组件的子组件也有componentDidMount函数，并会在父组件的componentDidMount函数之前被调用。
- 常用来网络请求数据
5.componentWillReceiveProps:
在React Native组件的初始渲染完成后，props改变时，这个函数被调用，参数是个新的props。
6.shouldComponentUpdate:
React Native组件的初始渲染执行完成后, RN组件接收到新的state或者props时这个函数会调用。
- 通过这个函数阻止无必要的重新渲染，是提高React Native应用程序性能的一大技巧。
7.componentWillUpdate:
初始渲染完成后,重新渲染前会调用这个函数。
- 这个函数不能通过this.setState再次改变状态机变量的值。
- 组件更新时调用。
8.componentDidUpdate
RN组件初始渲染完成后，RN框架在重新渲染RN组件完成后调用。 参数是渲染前的props和state。
- 组件更新完毕时调用。
9.componentWillUnmount:
ReactNative 组件被卸载前会调用，通常做一些清理内容。
项目介绍
双平台效果预览：
React Native是React在移动端的跨平台方案。如果想更快地理解和掌握React Native开发，就必须先了解React。
React是FaceBook开源的一个前端框架，它起源于 Facebook 的内部项目，并于 2013 年 5 月开源。因为React 拥有较高的性能，代码逻辑非常简单，所以越来越多的人已开始关注和使用它，目前该框架在Github上已经有7万+star。
ReactNative 技术导图：
组件化
React采用组件化的方式开发，通过将view构建成组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。有一句话说的很形象：在React中，构建应用就像搭积木一样。
组件化特征
React认为一个组件应该具有如下特征：
- 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
- 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
- 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；
封装好的导航栏就可以被称之为一个组件，它符合上述三个特点：
- 可组合：可以将导航栏组件放在页面组件中作为页面组件的子组件。而且在导航栏组件的内部，也有按钮组件等子组件。
- 可重用：如果封装好了该组件，就可以放在任意需要导航栏的页面（组件）使用，也可以放在其他项目中使用。
- 可维护：因为具有独立的功能和展示逻辑，所以便于定位和修改。
组件的属性与状态
在React Native（React.js）里，组件所持有的数据分为两种：
- 属性（props）：组件的props是不可变的，它只能从其他的组件（例如父组件）传递过来。
- 状态（state）：组件的state是可变的，它负责处理与用户的交互。在通过用户点击事件等操作以后，如果使得当前组件的某个state发生了改变，那么当前组件就会触发render()方法刷新自己。
我们可以看到这个页面有两个子页面，一个是‘最热’页面（组件），另一个是‘趋势‘页面（组件）。那么这两个组件都有什么props和state呢？
1.props： 由于props是从其父组件传递过来的，那么可想而知，props的声明应该是在当前组件的父组件里来做。在React Native中，通常props的声明是和当前组件的声明放在一起的：
//最热子页面 <FavoriteTabPage {...this.props} tabLabel='最热' flag={FlAG_STORAGE.flag_popular}/> //趋势子页面 <FavoriteTabPage {...this.props} tabLabel='趋势' flag={FlAG_STORAGE.flag_trending}/>
在这里，收藏页面是父组件，而最热页面和趋势页面是其子组件。在收藏页面组件里声明了最热页面和趋势页面的组件。
而且我们也可以看到，最热页面和趋势页面组件都用的是同一个组件：FavoriteTabPage，而这两个页面的不同点只在于传入的两个props的不同：tabLabel和flag。
而在FavoriteTabPage组件内部，如果想调用flag这个props，可以使用this.props.flag来调用。
2.state:
下面是最热和趋势页面的组件：
class FavoriteTabPage extends Component{ //组件的构造方法 constructor(props){ super(props); this.state={ dataSource:new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2}),isLoading:false, } }
这里面定义了两个state:
- dataSource:列表的数据源
- isLoading:是否正在刷新
这两个state都是将来可能经常变化的。比如在网络请求以后，列表的数据源会被替换掉，这个时候就要调用:
this.setState({ //把新的值newDataArr对象传给dataSource dataSource:newDataArr })
