ReactNative快速入门笔记

时间 2019-11-24

标签 reactnative 快速入门笔记繁體版

原文原文链接

ReactNative的文档地址有多个，若是你英文够好，就去研读官方的文档吧，
若是读原文比较吃力，中文官网也是不错的选择。html

下面是我我的记录的一些笔记，仅供初学者入门参考node

预科

入门React Native前须要了解一下知识，这样能帮助你更快的掌握RN
Node：Node.js 教程
ReactJS：《React 入门实例教程》
ES6：《ECMAScript 6 入门》react

环境

系统环境要求

IOS : MacOS, 黑苹果
Android :MacOS, Linux, Windowsandroid

配置

全部的技术学习都应该从环境搭建开始，这里也没什么好总结的，最好的方法就是跟着官网指导配置环境
若是你是node的老手，那就直接动手安装如下环境吧：ios

node
npm
react-native-cli
Xcode
安装Xcode IDE和Xcode的命令行工具（IOS开发依赖）
Android Studio
下载必须的插件：
a) JDK1.8+
b) Show Package Details
c) Android SDK Build Tools （指定23.0.1版本）
d) Android Support Repository
配置基础环境：
a) ANDROID_HOME （如运行是遇到问题可参考此文www.jianshu.com/p/a77396301…）
b) JAVA_HOME

测试

react-native init RNDemo
cd RNDemo
react-native run-ios复制代码

若是你的虚拟机启动了，那么恭喜你，你的环境已经配置成功！
若是运行报错，能够文章最后找寻解决方案。
git

语法

首先须要了解一些基本的React的概念，好比JSX语法、组件、state状态以及props属性。
还须要掌握一些React Native特有的知识，好比原生组件的使用。es6

教程上的东西我就很少说了，官方文档上有详细的讲解github

直接从代码上讲解新手注意点吧算法

Hello World

传统惯例，入门先行，Hello Worldnpm

你能够新建一个项目，而后用上面的代码覆盖你的index.ios.js或是index.android.js 文件，而后运行看看。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text } from 'react-native';
class HelloWorldApp extends Component {
  render() {
    return (
      <Text style={styles.red}>Hello world!</Text>
    );
  }
}
const styles = StyleSheet.create({
  red: {
    color: 'red',
    fontWeight: 'bold',
  }
});
// 注意，这里用引号括起来的'HelloWorldApp'必须和你init建立的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);复制代码

从语法上看，RN和ReactJS语法区别不大，都是采用JSX和ES6的形式，若是你对ReactJS和ES6不熟悉，建议你先拜读下阮一峰的博文教程：《React 入门实例教程》，《ECMAScript 6 入门》

相较写Web App，区别在于RN的语法引入了原生的组件

import { AppRegistry, StyleSheet, Text } from 'react-native';复制代码

RN中虽然使用JS写原生UI，但再也不使用常规HTML标签 <div> 或是 <span> ，而是使用RN的组件 <Text>
AppRegistry 模块写在index.ios.js或是index.android.js文件里，用来告知React Native哪个组件被注册为整个应用的根容器，通常一个应用只运行一次。

仅仅使用props和基础的View、Text、Image以及TextInput组件，就足以编写各式各样的UI组件了

样式

按照JSX的语法要求使用了驼峰命名法：

font-weight -> fontWeight
background-color -> backgroundColor

React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点：

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />复制代码

事件

事件的注册跟ReactJS没什么区别

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}> <Text>Button</Text> </TouchableHighlight>
    );
  }
}复制代码

此处注册的组件为TouchableHighlight，具体使用哪一种组件，取决于你但愿给用户什么样的视觉反馈

通常来讲，你可使用TouchableHighlight来制做按钮或者连接。注意此组件的背景会在用户手指按下时变暗。
在Android上还可使用TouchableNativeFeedback，它会在用户手指按下时造成相似墨水涟漪的视觉效果。
TouchableOpacity会在用户手指按下时下降按钮的透明度，而不会改变背景的颜色。
若是你想在处理点击事件的同时不显示任何视觉反馈，则须要使用TouchableWithoutFeedback。

经常使用的事件有：
点击：onPress
长按：onLongPress
缩放：maximumZoomScale，minimumZoomScale

另外关于Props、State、样式、布局、事件等知识点的详解，官方文档上都有详细的讲解，比较基础，这里就不作介绍了

跨平台

'Learn Once,Write Anywhere' and not 'Write Once,Running Anywhere'.

RN并不能算上是真正的跨平台的语言，虽然能够经过打包实现不一样平台打包不一样组件，可是有些组件须要咱们针对不一样平台编写不一样代码。这就要求咱们不用储备一些原生开发的知识。

工做原理

RN的本质是在两个模块之间搭建双向桥梁，让他们能够相互调用和响应，简单的示意图为

Native模块

运行在主线程上(可能会有些独立的后台线程处理运算，当前讨论中可忽略)
iOS平台上运行Object-C/Swift代码，Android平台上运行Java/Kotlin代码
负责处理UI的渲染，事件响应。

JS模块

运行在JS引擎的JS线程上
运行JS代码
负责处理业务逻辑，还包括了应该显示哪一个界面，以及如何给页面加样式。

Bridge模块

Native和JS模块之间不能直接通讯，只能经过Bridge作序列化和反序列化，查找模块，调用模块等各类逻辑，最终反应到应用上

性能

使用React Native替代基于WebView的框架，使App刷新能够达到每秒60帧（足够流畅），而且能有相似原生App的外观和手感，虽然RN框架已经提供了这个平衡的能力，但平衡点的选择却掌握在开发者手中，即使是Native也没法避免开发方式带来的性能消耗

性能影响缘由

业务逻辑运行在JS线程上，负责API的调用，事件的处理，状态的更新，而事件的响应UI的变化发生在主线程上，60帧/s的频率要求每一帧的响应处理只有16.67(1000/60)ms，若是超过了16.67ms就会发生丢帧，若是丢帧超过100ms就会产生明显的卡顿现象。全部下降每一帧运算的消耗才能提高性能。

性能影响切面

UI事件响应： 性能影响小
UI更新： JS侧会向Native侧同步大量的UI结构和数据，界面复杂、变更数据大，或者作动画、变更频繁，容易出现性能问题。
UI事件响应和UI更新同时出现： 两种事件若是占用了过多的线程，就会致使另外一种事件不能及时响应，表如今应用上就是卡顿

常见影响性能的点

console，ListView，动画Animated

性能优化

通过多年的发展和优化，JS和Native能够在各自的模块线程高效迅速的运行，性能的瓶颈主要在Bridge模块上，尤为是在JS和Native模块间频繁的调用会致使Bridge压力过大，产生卡顿

利用React自带的Virtual Dom的Diff算法尽可能减小须要同步的数据，合理利用setState方法
在遇到动画性能问题时，能够使用Annimated类的库，一次性把如何变化的声明发送到Native侧，Native侧根据接收到的声明本身负责接下来的UI更新。不须要每帧的UI变化都同步一次数据。
Native和JS混编，把会大量变化的组件作成Native组件
遇到UI事件响应和UI更新同时，可使用Interaction Manager把那些耗时较长的工做安排到全部互动或动画完成以后再进行

App高性能开发引导

RN的开发并无一种高质量产出的方法，由于各个项目间有着不一样的组件组合，所以只能经过高效的开发方式来尽量的优化应用。
通常来讲，经过几版优化都能达到“极致体验”的要求。
下面列一下高效开发方式的流水：

全JS实现，保证开发的高效率，高产出
发现问题先在JS测作优化，如上面提到的Annimated类库，Interaction Manager。
真机测试，找全问题再作处理，避免出现连锁bug
JS测解决不了的问题再有Native组件完成。

关于热更新

原理

一、RN是使用脚本语言来编写的，是的代码能够不用事先编译即可即读即运行
二、RN在发布时将代码资源打包成一个文件 bundle js文件
三、其余的基础插件不变，仅仅替换一个bundle文件就实现了热更新

流程

Rushy

Rushy是国内RN团队自主研发的一套热更新包管理平台

Pushy的特色：

命令行工具&网页双端管理，版本发布过程简单便捷，彻底能够集成CI。
基于bsdiff算法建立的超小更新包，一般版本迭代后在1-10KB之间，避免数百KB的流量消耗。
支持崩溃回滚，安全可靠。
meta信息及开放API，提供更高扩展性。
跨越多个版本进行更新时，只须要下载一个更新包，不须要逐版本依次更新。

社区

RN同ReactJS同样，有着强大的社区，从RN版本更新的速度上就能够看出来

平均2个月一个版本

google的搜索结果也能说明RN的影响力

开发者须要用到的组件在JS.Coach基本均可以找到。