为React Native开发写的JS和React入门知识

来自Leo的原创博客，转载请著名出处

我的stackoverflow

前言

想来想去，还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候，完全没接触过React，大学那会简单学了点JS。毕业后一直在某五百强外企上班。做的东西也乱七八糟的，搞过大数据，搞过物联网，不过看我博客的同学应该知道，我对iOS和Android还是比较喜欢的。所以，博客都是写的都是移动端的东西。好像扯的有点多了，本文的目的就是为了那些JS和React小白提供一个快速入门，能够在看React
Native语法的时候能够不那么吃力，有过JS经验的同学可以直接略过了

准备工作

先安装React Native，然后初始化一个示例工程

react-native init JSReactBasics

1
1

会生成如下一个目录 



然后，XCode打开JSReactBasics.xcodeproj，运行模拟器会看到如下截图

本文，示例代码都是修改的

index.ios.js

，每次修改后选择保存。

Command
+ R

就可以动态刷新了。

默认创建的index.ios.js如下

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/
//导入一些必要的模块
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
//类，这是默认的载入类，继承自Component，Component类似于Android和iOS中的View
class JSReactBasics extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
//定义风格
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

AppRegistry.registerComponent('JSReactBasics', () => JSReactBasics);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

什么是JavaScript？

JS是一个轻量级的，解释型的讲函数视为一级公民的程序设计语言。他是一种基于原型的多范式动态脚本语言，支持面向对象，命令式编程和函数式编程。

JavaScript的标准是 ECMAScript,React Native的语法是基于ECMAScript 6，简称ES6.

Tips：Java和JavaScript语法很像，但是用处完全不同，而且也是两个几乎没关系的东西

关于Java和JS的区分，可以见如下表

JavaScript	Java
面向对象。不区分对象类型。通过原型机制继承，任何对象的属性和方法均可以被动态添加。	基于类系统。分为类和实例，通过类层级的定义实现继承。不能动态增加对象或类的属性或方法
变量类型不需要提前声明(动态类型)。	变量类型必须提前声明(静态类型)。
不能直接自动写入硬盘。	可以直接自动写入硬盘

JS的基础知识

声明

var 声明变量，可以在声明的时候初始化为一个值
let 声明块范围局部变量，可以在声明的时候初始化一个值
const 声明一个只读常量

Tips：JS是大小写敏感的

变量，常量

命名要以数字字母下划线开头 

例如，在

class ReactJSBasics

上添加两行

var mainText = "来自Leo的博客"
var subText = "欢迎阅读"

1
2
1
2

Tips:JS是一个动态类型语言(dynamically typed language)中，所以变量不需声明类型，必要的时候自动转换

然后，让Text来显示这个这两个变量

return (
<View style={styles.container}>
<Text style={styles.welcome}>
{mainText}
</Text>
<Text style={styles.instructions}>
{subText}
</Text>
</View>
);

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

然后save，选择模拟器，Command＋R刷新，会看到截图如下 



常量可以看到index.ios.js文件最下面有类似

const styles = StyleSheet.create({....

1
1

就是一个常量。在声明的时候，必须初始化

数据结构和类型

六种基本的原型数据类型
Boolean，布尔值，true或者false
null，一个表明null的特殊关键字，注意JS中大小写敏感，null和NULL是完全不同的东西
undefined.变量为定义的属性
Number，数字
String，字符串
Symbol ，ES6中新增的，唯一不可变的

以及Object类型

流程控制

if,else
switch
for
while
break
continue

这个各个语言大同小异，不浪费篇幅了,有一点要提一下，JS中的Switch Case中可以是String

有一点要注意，以下值在JS中是会识别为false

false
undefined
null
0
NaN
空字符串 ("")

1
2
3
4
5
6
1
2
3
4
5
6

注释

// 这是一个单行注释.

/* 这是一个多行注释。它可以是任意长度，你可以在这里随便写什么。 */

1
2
3
1
2
3

Promises

从ES6开始，JS中引入了Promises来处理异步和延迟操作，在React Native的网络请求中是很常见的。

一个promise有以下几种状态
pending，最初的状态
fulfilled，执行失败
rejected，执行成功
settled，执行结束了，失败(rejected)或者成功(fulfilled)

控制图如下

函数

函数的定义如下，由

function

关键字声明，在()添加输入，输入不需要声明类型

function globalFunction(input){
console.log(input);
}

1
2
3
1
2
3

我们接着上述的工程，添加一个可点击的

TouchableHighLight

 

在import中，添加一行

TouchableHighlight

1
1

重新定义变量和类的内容

var mainText = "点击屏幕任意位置"
function globalFunction(input){
console.log(input);
}
class JSReactBasics extends Component {
render() {
return (
<TouchableHighlight
onPress={() => globalFunction("输入")}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后，save，command+R刷新，再点击屏幕任意位置，会发现如下log 


 

这样的方法是定义在全局的，当在类中定义的时候，不需要funciton关键字

通过this.functionName来访问

var mainText = "点击屏幕任意位置"
class JSReactBasics extends Component {
render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
backgorundClicked(){
console.log("类中的方法");
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

箭头函数(Arrow functions)

没接触过JS的同学可能会对

onPress={() => this.backgorundClicked()

1
1

这一行感到很奇怪，其实这里onPress是一个函数类型（在JS中，函数本身也是一种类型）。这其实是JS中的箭头函数，他提供了一种更简洁的函数表达方式 

修改

backgorundClicked

，为如下内容

backgorundClicked(){
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryl­lium"
];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( (s) => s.length );
console.log(a2);
console.log(a3);
}

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

然后，save,Commnad+R刷新，可以看到两个log的内容是一样的。也就是说，

(s)

用来描述参数，

=>

后的表示方法的执行体。学过Swift的童鞋，会发现和Swift的必包很像。

数组

可以由以下三种方式创建数组，访问数组的方式还是通过角标来访访问

var a = ["1","2","3","4"];
var b = new Array("1","2","3","4")
var c = Array("1","2","3","4")
console.log(a[1]);

1
2
3
4
5
1
2
3
4
5

数组有一些方便的方法，例如合并，排序，检索等，可以在MDN上找到

字典Maps

var map = {"key1":"value1","key2":"value2"}
var map = {"key1":"value1","key2":"value2"}
map["key4"] = "value4"
console.log(map["key1"])
console.log(map["key4"])

1
2
3
4
5
1
2
3
4
5

对象

JS中的对象的属性可以不先声明，而在运行时候动态添加，例如

var obj = new Object()
obj.name = "1234"
console.log(obj.name);

1
2
3
1
2
3

所以，在React Native中，写代码的时候，存储数据直接

this.propertyName ＝

即可

JavaScript是基于原型的面对象语言

理解这一点，对使用JS开发还是比较重要的。 

像Java，Objective C，C＋＋都是基于类的面向对象语言，面向对象语言有两个，基于类的面向对象语言主要有两个概念
类(class),定义了一组具有某一类特征的事务。类是抽象的，比如鸟类
实例（instance），实体是类的实体话提现，比如一只鸟

基于原型的面向对象
基于原型的面向对象语言并不存在这种区别，基于原型的面向对象语言所有的都是对象。基于原型的面向对象语言有一个概念叫做原型对象,古代有一种东西叫做活字印刷术，那一个个字的模版就是这里的原型对象。

Tips:React Native引入了基于类的面向对象编程概念，这个在后面讲解React基础的时候来介绍

通过比较Java和JS可以了解二者的区分

基于类的（Java）	基于原型的（JavaScript）
类和实例是不同的事物。	所有对象均为实例。
通过类定义来定义类；通过构造器方法来实例化类。	通过构造器函数来定义和创建一组对象。
通过 new 操作符创建单个对象。	相同。
通过类定义来定义现存类的子类，从而构建对象的层级结构。	指定一个对象作为原型并且与构造函数一起构建对象的层级结构
遵循原型链继承属性。	构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。

什么是React？

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES（一个JavaScript的用来创建界面的库）

Tips:通过名字就可以看出来，ReactNative是基于React来写的支持编写原生App的框架

React的基础知识

React

React是整个React框架的入口

React.Component

Component是React类的基类，类似于iOS的UIView和Android的View,React和React native都定义了很多方便的子类来给开发者使用。

React.createClass

创建一个Component

Component 相关对象方法

render

调用

React.createClass

或者让一个类继承自class 

JSReactBasics
extends Component

都是需要提供

render

函数的。这个函数返回一个根的视图，用来渲染实际的Component可视部分，例如例子中的，

render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

getInitialState()

在Component被加载之前调用一次，这个方法的返回值回被设置为

this.state

Tips:这个方法只能在用

React.createClass

创建的时候使用，例如，在我们示例代码中，加入一个方法

getInitialState(){
return {key:"value"}
}

1
2
3
1
2
3

会提示如下警告 

getDefaultProps()

在Class 创建的时候，调用一次，这个方法在调用的时候，任何实例还没有被创建。还有一点要注意，这个方法返回的任何Object 对象，在各个实例中是共享的，而不是每个实例一个copy。

statics

statics对象，用来定义Components可以调用的静态方法，例如

var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});

MyComponent.customMethod('bar');  // true

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

生命周期

componentWillMount

在最初的渲染之前调用一次,在React中，设置

this.state

会导致重新渲染，但是componentWillMount设置

this.state

并不会对导致render调用多次

componentDidMount

在渲染结束后，调用一次

componentWillReceiveProps

在component接收到新的参数前调用，在这个方法中调用this.setState不会触发二次渲染，第一次渲染的时候不会调用这个方法

shouldComponentUpdate

boolean shouldComponentUpdate(
object nextProps, object nextState
)

1
2
3
1
2
3

在每次重新触发渲染之前调用，其中

nextProps

和

nextState

分别对应下一个状态的参数和状态对象。可以在这个方法中返回false来取消本次渲染。 

例如

shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}

1
2
3
1
2
3

componentWillUpdate

在重新渲染之前调用 
Warning：这个方法里不能调用this.setState()否则会陷入死循环

componentDidUpdate

在渲染之后调用

componentWillUnmount

在被删除之前调用

为了更好的理解生命周期，我们来用React的风格重写示例代码 

重写整个类

var JSReactBasics = React.createClass({
getInitialState(){
console.log("getInitialState");
return {key:"点击屏幕任意位置"}//设置最初的值
},
componentWillMount(){
console.log("componentWillMount");
},
componentDidMount(){
console.log("componentDidMount");
},
shouldComponentUpdate(nextProps,nextState){
console.log("shouldComponentUpdate");
return true
},
componentWillUpdate(nextProps,nextState){
console.log("componentWillUpdate");
},
componentDidUpdate(prevProps,prevState){
console.log("componentDidUpdate");
},
render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{this.state.key}</Text>
</TouchableHighlight>
);
},
backgorundClicked(){
this.setState({
key:"设置了新的值"
});
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

然后，save，Command+R，会看到Log以及效果 

2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] getInitialState
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] componentWillMount
2016-04-20 16:06:52.909 [info][tid:com.facebook.react.JavaScript] componentDidMount

1
2
3
1
2
3

然后，点击屏幕任何位置，会看到Log和截图 

2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] shouldComponentUpdate
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] componentWillUpdate
2016-04-20 16:08:23.707 [info][tid:com.facebook.react.JavaScript] componentDidUpdate

1
2
3


1
2
3

后续

React Native开发之快速入门React