一份传男也传女的 React Native 学习笔记

学习就如同长跑，要想跑的远，就不能跑得太快。

背景介绍

这段时间了解了一些前端方面的知识，而且用 React Native 写了一个简易新闻客户端 Demo。

React Native 和原生开发各有所长，具体就不细说。混合使用能充分发挥各自长处，惟一的缺憾就是 React Native 和原生通讯过程相对不那么友好。

在这里分享一下学习过程当中我的认为比较重要的知识点和学习资料，本文尽可能写得轻一些，但愿对读者可以有所帮助。

预备知识

有些前端经验的小伙伴学起 React Native 就像老马识途，东西都差很少，变来变去也玩不出什么花样。

HTML5：H5 元素对比 React Native 组件，使用方式一模一样。

CSS：React Native 的 FlexBox 用来为组件布局的，和 CSS 亲兄弟关系。

JavaScript：用 JavaScript 写，能不了解一下吗？ JavaScript 之于 React Native 就如同砖瓦之于摩天大楼。

React JSX：React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

1、开始学习 React Native

React Native 社区相对比较成熟，中文站的内容也比较全面，从入门到进阶，环境安装到使用指南，学习 React Native 推荐从官网 reactnative.cn 开始。FlexBox 布局、组件、API 建议在该官网查看，注意网页顶部能够切换 React Native 的历史版本。

1.1 安装开发环境

1. React Native 官网推荐搭建开发环境指南传送门。(记得设置 App Transport Security Settings ，容许 http 请求)
2. 已创建原生项目，将 React Native 集成到现有原生项目传送门
3. 基于第2点，React Native 与原生混编的状况下，React Native 与原生如何通讯传送门
4. 在 IDE 选择这一点上，不要过多纠结，我的使用 WebStorm ，比较省心。

1.2 生命周期

class Clock extends React.Component {
  // 构造函数 一般进行一些初始化操做 如定义 state 初始值
  constructor(props) {
    super(props);
  }
  
  // 组件已挂载
  componentDidMount() {}
  
  // 组件即将被卸载
  componentWillUnmount() {}
  
  // 渲染函数 
  render() {
    return (
      <View></View>
    );
  }
}
复制代码

1.3 Props 与 State

一个组件全部的数据来自于 Props 与 State ，分布是外部传入的属性和内部状态。

Props 是父组件给子组件传递数据用的，Props 由外部传入后没法改变，能够同时传递多个属性。

// 父组件 传递一个属性 name 给子组件
<Greeting name='xietao3' />

// 子组件使用父组件传递下来的属性 name
<Text>Hello {this.props.name}!</Text>
复制代码

State ：用来控制组件内部状态，每次修改都会从新渲染组件。

// 初始化 state
constructor(props) {
    super(props);
    this.state = { showText: 'hello xietao3' };
}

// 使用 state
render() {
    // 根据当前showText的值决定显示内容
    return (
      <Text>{this.state.showText}</Text>
    );
}

// 修改state，触发 render 函数，从新渲染页面
this.setState({showText: 'hello world'});
复制代码

举个栗子(若是理解了就跳过吧)：

咱们使用两种数据来控制一个组件：props 和 state。 props 是在父组件中指定，并且一经指定，在被指定的组件的生命周期中则再也不改变。 对于须要改变的数据，咱们须要使用 state 。

通常来讲，你须要在 constructor 中初始化 state ，而后在须要修改时调用setState方法。

假如咱们须要制做一段不停闪烁的文字。文字内容自己在组件建立时就已经指定好了，因此文字内容应该是一个 prop 。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，所以这一状态应该写到 state 中。

1.4 组件与 API

说到组件就不得不说 React Native 的组件化思想，尼古拉斯 · 赵四 曾经说过，组合因为继承。简单来讲就是多级封装嵌套、组合使用，提升基础组件复用率。

组件怎么用？

授人以鱼不如授人以渔，点击这里打开官方文档 ，在左边导航栏中找到你想使用的组件而且点击，里面就有组件的使用方式和属性的详细介绍。

关于 API

建议写第一个 Demo 以前把全部 API 浏览一遍，磨刀不误砍柴工，不必定要会用，但必定要知道这些提供了哪些功能，后面开发中可能会用得上。API 列表一样能够在官网左边导航栏中找到。

2、助力 React Native 起飞

如下内容不建议在第一个 Demo 中使用：

2.1 Redux

Redux(中文教程、英文教程) 是 JavaScript 状态容器，提供可预测化的状态管理。

部分推荐教程：

• [阮一峰] - Redux 入门教程（一）：基本用法

• [阮一峰] - Redux 入门教程（二）：中间件与异步操做

• [阮一峰] - React-Redux 的用法

2.2 CodePush

React Native 热更新的发动机，接入的时候绕了不少圈圈，后面发现接入还挺方便的。CodePush 除了可使用微软提供的服务进行热更新以外，还能够自建服务器进行热更新。

推荐教程：

• CodePush 接入官方文档
• 微软的React Native热更新 - 使用篇
• react-native-code-push进阶篇

3、 与原生端通讯

3.1 在 React Native 中使用原生UI组件

填坑：

• 原生端的 Manager 文件若是有 RCT 前缀，在 RN 中引用的时候不要加 RCT。
• 原生 UI 组件的 RCTBubblingEventBlock 类型属性命名必定要以 on 开头，例如 onChange。

3.2 在 React Native 中发消息通知给原生端(因为RN调用原生端是异步的，最好在回调中经过通知把消息传递到具体的类)

3.3 在原生端发消息通知给 React Native (建议在Manager中写一个类方法，这样外部也能够灵活发送通知)

这里实际上是有 Demo 的,可是还没整理好🤦️。

4、React Native 进阶资源

有时候一会儿看到好多感兴趣的东西，容易分散注意力，在未到达必定水平以前建议不要想太多，入门看官网就足够了。当你掌握了那些知识以后，你就能够拓展一下你的知识库了。

• awesome-react-native 19000+⭐️（包含热门文章、信息、第三方库、工具、学习书籍视频等）
• react-native-guide 11900+⭐️ （中文 react-native 学习资源、开 源App 和组件）
• js.coach （第三方库搜索平台）
• 我的收集的一些开源项目（读万卷书不如行万里路，行万里路不如阅码无数！常常看看别人的代码，总会有新收获的）

5、React Native 第一个小 Demo

5.1 MonkeyNews 简介

MonkeyNews，纯 React Native 新闻客户端，部分参考知乎日报，而且使用了其部分接口 因为是练手项目，仅供参考，这里附上 GitHub 地址，感兴趣的能够了解(star)一下。

5.2 用到的第三方库：

• react-native-code-push：React Native 热更新
• react-native-swiper：用于轮播图
• react-navigation：TabBar + NavigationBar

5.3 项目结构

Common

MKSwiper.js
MKNewsListItem.js
MKImage.js
MKPlaceholderView.js
MKThemeListItem.js
MKLoadingView.js
...

Config

MKConstants.js

Pages

Home

MKHomePage.js
MKNewsDetailPage.js

Category

MKCategoryPage.js
MKThemeDetailPage.js

UserCenter

MKUserCenterPage.js

Services

MKServices.js
APIConstants.js

Styles

commonStyles.js

6、总结

在对 React Native 有了一些了解以后，我的感受目前 React Native 的情况很难替代原生开发，至少现阶段还不行。

我的认为的缺点：React Native 的双端运行的优势并不明显，不少原生 API 使用起来都比较麻烦，很大程度上抵消了双端运行带来的开发效率提高，这种状况下我甚至更愿意用原生 iOS 和 Android 各写一套。

优势：React Native 和原生组合使用，经过动态路由动态在原生页面和 React Native 页面之间切换，能够在原生页面出现 bug 的时候切换至 React Native 页面，或者比较简单的页面直接使用 React Native 开发都是很是不错的。

总之， React Native 也是能够大有做为的。