前言
想来想去，还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候，完全没接触过react，大学那会简单学了点js。毕业后一直在某五百强外企上班。做的东西也乱七八糟的，搞过大数据，搞过物联网，不过看我博客的同学应该知道，我对iOS和Android还是比较喜欢的。所以，博客都是写的都是移动端的东西。好像扯的有点多了，本文的目的就是为了那些JS和React小白提供一个快速入门，能够在看React Native语法的时候能够不那么吃力，有过JS经验的同学可以直接略过了
准备工作
先安装react native，然后初始化一个示例工程
react-native init JSReactBasics11
会生成一个目录
然后，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中的Viewclass 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);12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152531234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253什么是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 = "欢迎阅读"1212
Tips:JS是一个动态类型语言(dynamically typed language)中，所以变量不需声明类型，必要的时候自动转换
然后，让Text来显示这个这两个变量
return ( <View style={styles.container}>
<Text style={styles.welcome}>
{mainText} </Text>
<Text style={styles.instructions}>
{subText} </Text>
</View>
);1234567891012345678910然后save，选择模拟器，Command＋R刷新，
常量可以看到index.ios.js文件最下面有类似
const styles = StyleSheet.create({....11就是一个常量。在声明的时候，必须初始化
数据结构和类型
六种基本的原型数据类型
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
falseundefinednull0NaN空字符串 ("")123456123456注释
// 这是一个单行注释./* 这是一个多行注释。它可以是任意长度，你可以在这里随便写什么。 */123123
Promises
从ES6开始，JS中引入了Promises来处理异步和延迟操作，在React Native的网络请求中是很常见的。
一个promise有以下几种状态
pending，最初的状态
fulfilled，执行失败
rejected，执行成功
settled，执行结束了，失败(rejected)或者成功(fulfilled)
函数
函数的定义如下，由function关键字声明，在()添加输入，输入不需要声明类型
function globalFunction(input){
console.log(input);
}123123我们接着上述的工程，添加一个可点击的TouchableHighLight
在import中，添加一行
TouchableHighlight11
重新定义变量和类的内容
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>
);
}
}12345678910111213141516171234567891011121314151617然后，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("类中的方法");
}
}12345678910111213141516171234567891011121314151617箭头函数(Arrow functions)
没接触过JS的同学可能会对
onPress={() => this.backgorundClicked()11这一行感到很奇怪，其实这里onPress是一个函数类型（在JS中，函数本身也是一种类型）。这其实是JS中的箭头函数，他提供了一种更简洁的函数表达方式
修改backgorundClicked，为如下内容
backgorundClicked(){ var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium"
]; var a2 = a.map(function(s){ return s.length }); var a3 = a.map( (s) => s.length ); console.log(a2); console.log(a3);
}123456789101112123456789101112然后，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]);1234512345数组有一些方便的方法，例如合并，排序，检索等，可以在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"])1234512345对象
JS中的对象的属性可以不先声明，而在运行时候动态添加，例如
var obj = new Object() obj.name = "1234" console.log(obj.name);123123
所以，在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>
);
}12345678910111234567891011getInitialState()
在Component被加载之前调用一次，这个方法的返回值回被设置为this.state
Tips:这个方法只能在用React.createClass创建的时候使用，例如，在我们示例代码中，加入一个方法
getInitialState(){ return {key:"value"}
}123123getDefaultProps()
在Class 创建的时候，调用一次，这个方法在调用的时候，任何实例还没有被创建。还有一点要注意，这个方法返回的任何Object 对象，在各个实例中是共享的，而不是每个实例一个copy。
statics
statics对象，用来定义Components可以调用的静态方法，例如
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});
MyComponent.customMethod('bar'); // true12345678910111234567891011生命周期
componentWillMount
在最初的渲染之前调用一次,在React中，设置this.state会导致重新渲染，但是componentWillMount设置this.state并不会对导致render调用多次
componentDidMount
在渲染结束后，调用一次
componentWillReceiveProps
在component接收到新的参数前调用，在这个方法中调用this.setState不会触发二次渲染，第一次渲染的时候不会调用这个方法
shouldComponentUpdate
boolean shouldComponentUpdate( object nextProps, object nextState )123123
在每次重新触发渲染之前调用，其中nextProps和nextState分别对应下一个状态的参数和状态对象。可以在这个方法中返回false来取消本次渲染。
例如
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}123123componentWillUpdate
在重新渲染之前调用
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:"设置了新的值"
});
}
});12345678910111213141516171819202122232425262728293031323334353637381234567891011121314151617181920212223242526272829303132333435363738然后，save，Command+R，效果
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] componentDidMount123123
然后，点击屏幕任何位置，截图
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] componentDidUpdate123
共同学习，写下你的评论
评论加载中...
作者其他优质文章
