Contacts 梳理

原文链接
前面好几篇文章都说到了我写的一个 DEMO，那么这个 DEMO 到底是什么呢？

描述

• 使用 React Native 完成一个手机端的通讯录

需求

• 有姓名、电话、公司、头像...
• 代码提交至 github
• 重构（使用比较高级的组件）
• 下拉加载数据，下拉不到底（不使用 Redux）
• 使用 Redux 完成下拉功能
• 使用 Redux 发送真正的请求获取数据
• 加载数据的过程中页面出现转圈功能
• 使用 react-native-router-flux

输出

• Github 地址：Contact Demo

• 用到的主要内容：

  
  image.png
• 相关文档：《React 生命周期》、《一个神奇的跨域问题》、《前端发请求用什么》、《Promise 学习笔记》、《React Native 从写 BUG 到修 BUG》

主要内容

1. React Native
   Facebook 于 2015年4月开源跨平台移动应用开发框架，React 在原生移动应用平台的衍生物

2. 从 0 到 1 搭建 DEMO 库
   使用脚手架 react-native-cli，执行以下命令：
   npm install -g react-native-cli # 全局安装 react-native-cli
react-native init projectName # 使用 react-native 初始一个项目
   这个脚手架主要做以下几件事：

   • 新建一个名为 projectName 的文件夹
   • 在这个文件夹中建立 package.json 文件
   • npm install --save react-native-cli 运行这个命令，安装 react-native 及其依赖，这些依赖放在 projectName/node_modules 文件夹中。package.json 中声明 react-native 作为 projectName 项目的依赖
   • 全局安装 react-native CLI 工具，并且将控制权交给本地的 CLI 工具，也就是 projectName/node_modules/react-native/local-cli/cli.js 文件
   • 执行 projectName/node_modules/react-native/init.sh 文件。用于生成标准代码的脚本，比如：index.ios.js、iOS 文件夹中的 Objective-C 代码，以及 projectName.xcodeproj 文件夹中的 Xcode 仙姑配置

3. Promise
   在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。而 Promise 对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。

4. React 生命周期

   
   image.png
   • 父组件的 Will 函数在子组件 Will 函数之前执行（Will 函数包括 componentWillMount，componentWillUpdate）
   • 父组件的 Did 函数在子组件 Did 函数之后执行（Did 函数包括 componentDidMount，componentDidUpdate）

5. Redux
   Redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架。最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）

6. react-native-router-flux
   用于页面跳转

7. 《深入 React 技术栈》

image.png

参考资料

• React
• React Native
• Redux
• Promise
• 深入 React 技术栈
• react-native-router-flux