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

欢迎Follow我的Github，博客会同步在Github的Blog仓库更新。

• Github地址： LeoMobileDeveloper

---

前言

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

---

准备工作

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

react-native init JSReactBasics

会生成如下一个目录

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

---

什么是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 = "欢迎阅读"

Tips:JS是一个动态类型语言(d