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

时间 2019-11-06

原文原文链接

前言

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

准备工做

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

react-native init JSReactBasics

会生成以下一个目录
git

而后，XCode打开JSReactBasics.xcodeproj，运行模拟器会看到以下截图github

本文，示例代码都是修改的index.ios.js，每次修改后选择保存。Command + R就能够动态刷新了。编程

默认建立的index.ios.js以下react-native

/**
 * 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);

什么是JavaScript？

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

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

Tips：Java和JavaScript语法很像，可是用处彻底不一样，并且也是两个几乎不要紧的东西promise

关于Java和JS的区分，能够见以下表网络

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

JS的基础知识

声明

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

Tips：JS是大小写敏感的

变量，常量

命名要以数字字母下划线开头
例如，在class ReactJSBasics上添加两行

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

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

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

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

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

常量能够看到index.ios.js文件最下面有相似

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

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

数据结构和类型

六种基本的原型数据类型

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
空字符串 ("")

注释

// 这是一个单行注释.

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

Promises

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

一个promise有如下几种状态

pending，最初的状态
fulfilled，执行失败
rejected，执行成功
settled，执行结束了，失败(rejected)或者成功(fulfilled)

控制图以下

函数

函数的定义以下，由function关键字声明，在()添加输入，输入不须要声明类型

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

咱们接着上述的工程，添加一个可点击的TouchableHighLight
在import中，添加一行

TouchableHighlight

从新定义变量和类的内容

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>
    );
  }
}

而后，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("类中的方法");
  }
}

箭头函数(Arrow functions)

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

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

这一行感到很奇怪，其实这里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);
  }

而后，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]);

数组有一些方便的方法，例如合并，排序，检索等，能够在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"])

对象

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

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

因此，在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>
    );
  }

getInitialState()

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

Tips:这个方法只能在用React.createClass建立的时候使用，例如，在咱们示例代码中，加入一个方法

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

会提示以下警告

getDefaultProps()

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

statics

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

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

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

生命周期

componentWillMount

在最初的渲染以前调用一次,在React中，设置this.state会致使从新渲染，可是componentWillMount设置this.state并不会对致使render调用屡次

componentDidMount

在渲染结束后，调用一次

componentWillReceiveProps

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

shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
)

在每次从新触发渲染以前调用，其中nextProps和nextState分别对应下一个状态的参数和状态对象。能够在这个方法中返回false来取消本次渲染。
例如

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

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:"设置了新的值"
    });
  }
});

而后，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

而后，点击屏幕任何位置，会看到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

后续

从今天十点上班写道下午四点，想了想，应该还有些基础的部分要写的，先发布出来吧，后边继续写。