react native 两周学习笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/w_xue/article/details/82427818

##搭建demo环境
预期时间：1天
参照https://reactnative.cn/搭建编译环境，在真机上跑demo

2018-09-05
电脑有现成的android编译环境，已经安装node 8，已配置npm镜像，已 安装react-native模块。

ide使用webstorm，同时安装react native console插件

使用react-native init AwesomeProject生成项目
使用react-native run-android编译项目

从终端输出可以看出执行android命令主要是做如下几件事情

1.启动js server用于live reload
如果我们在手机端reload时报错，应用会提示我们直接在项目目录执行npm start 启动js server，从项目的package.json中scripts的配置可以看到，最后执行的命令为：

node node_modules/react-native/local-cli/cli.js start

2.编译android apk

Building and installing the app on the device (cd android && ./gradlew installDebug).

3.将js server的监听端口映射到手机的8081端口，此处失败，暂不处理，后面手动连接

Running adb -s 005f16d80f8e4ec6 reverse tcp:8081 tcp:8081
Could not run adb reverse: spawnSync adb ENOENT

4.启动默认启动页

Starting the app on 005f16d80f8e4ec6 (adb -s 005f16d80f8e4ec6 shell am start -n com.awesomeproject/com.awesomeproject.MainActivity)...

##简单熟悉js和node
预期时间：1天
参考地址https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

js基础
2018-09-06
1.变量使用var a = 10;的模式来定义，其中var可以省略，则定义的变量会成为全局变量，容易导致问题。 可以在js代码的第一行写上’use strict’;来启用严格模式，变量定义时未采用var会报错

2.语句块，数字运算符（除0比较特殊），布尔运算与java基本一致

3.数字为number类型，除常见数字类型外还有NaN和Infinity(除0结果为无限大)

4.比较运算符始终使用===，在数据类型不一致时返回false,特例为NaN只能通过isNaN(NaN)来比较，另外浮点数的比较要比较两者差值是否小于一定阈值

5.null和undefined: 空和未定义，基本一致。 通常我们使用null，仅在判断函数的参数是否有传递的情况下使用undefined

6.数组与java类似，其成员可以为任意类型。数组提供了一系列的方法，如sort, slice, indexOf ,reverse, join。 需要注意的是如果索引超出范围，则返回undefined,同时数组会自动扩容

7.java对象为大括号包括的键值对，其中key为字符串，引号可以省略（如果key不符合变量命名则不可以省略），value为任意类型，如
var person = {
name: ‘bob’,
age: 20,
hasCar: fasle,
other: NaN,
another: undefined
}
访问变量有两种方式 person.name或者person[‘name’]。
可以通过赋值任意添加属性，如person.sex=man; 也可以通过delete关键字删除属性如delete person.age;
判断对象是否有某属性(包括继承的属性)，‘age’ in person;
判断独享是否有某非继承的属性，person.hasOwnProperty(‘age’);

8.字符串：语法包括转义与java类似，其中可以使用\x开头标识ascll码，也可以用\u开头标识unicode码。 另外es6新增特性多行字符串，可以不用加换行，``， 另外还有模板字符串，即多行字符串中可以使用${variable}
字符串有一个只读number类型属性s.length;

9.条件判断if else与java一致，需要注意的是js中null, 0, undefined, ‘’，NaN均为false，其余一律为true

10.循环与java基本一致 for, for…in, while, do-while

11.es6引入Map和Set，以及iterable类型，其中Array,Map和Set均为iterable，可以通过for-of来遍历

12.普通函数的定义
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
上面abs(x)为一个函数对象，abs为指向该函数的变量。
函数的另外一种定义方式为
var abs = function (x) {…};
此处变量abs指向一个匿名函数。

13.函数的调用
函数调用允许传入任意数量的参数，不影响函数调用。必要时可以通过如下代码来检查参数类型

if (typeof x != 'number') {
    throw 'not a number!';
}

在函数内部可以使用关键字arguments来获取所有入参，类似于Array，使用arguments[0]来获取首个入参，其余类似。即使函数定义时没有入参，调用时一样可以通过arguments获取到。
当定义函数时设计某个参数为可选参数时，可以通过arguments.length来判断入参数量，然后判断是否要对入参进行移位。

14.rest参数
es6中引入rest参数，可以理解为其余参数，只能用在末尾

function abs(a, b, ...rest) {
    console.log(rest); // 打印Array，可能为空数组，不会是undefined
}

15.函数变量作用域
var声明的函数变量作用域为函数内部，由于函数可以嵌套，内部函数可以使用外部函数的变量，内部函数会覆盖外部函数的同名变量。

16.变量提升
函数中所有var定义的变量会优化为在顶部声明所有变量，因此在实际编码时，最好遵循原则：在函数顶部声明所有会用到的内部变量。

17.全局作用域
不在任何函数中定义的变量拥有全局作用域，实际上它会绑定为window对象的一个属性。我们平时使用到的alert函数也是window中定义的函数。

18.命名空间
由于全局变量会绑定到window中，容易引起冲突，所以实际操作中通常使用如下方式将全局变量放入唯一的命名空间，JQuery underscore都是这么做的。

var MYAPP={}; // 定义一个对象
MYAPP.name = 'myapp';
MYAPP.foo = function (x) {
    return x +1;
};

19.let和const
var的作用域实际上为函数内部，即使在for语句内部定义的语句，在for语句外一样可以引用。
es6引入块作用域，let修饰的变量仅作用于块，比如for语句内部。同时es6引入const关键字，用于声明一个常量，同样为块作用域。

20.解构赋值
es6中可以通过解构赋值同时对一组变量进行赋值，比如

var [x, y, z] = ['Hello', 'JavaScript', 'Nice'];

也可以使用解构赋值，直接获取对象的指定属性，比如

let {name, age, passport} = person;

必要时可能需要用小括号括起来避免js引擎将{}当作了块处理导致报错。

如果使用的变量名和属性名不一致，可以使用如下的语法获取，同时针对未获取到的属性可以设置默认值，不再是undefined

let {name, password:id=1} = person; // password为person的属性

注意上面的语句中password不是变量，引用会报错

21.方法
在一个对象中绑定函数，称该函数为这个对象的方法，比如

var xiaoming = {
    name: 'xiaoming',
    age: function () {
       var y = new Date().getFullYear();
       return y - this.birth;
    }
}

上述定义中age即为对象的方法，调用方式为xiaoming.age()
方法中的this代表当前对象，在对象中或者方法内定义的内部函数中的this指向window或者undefined

22.函数的apply和call方法
函数本身提供了apply和call方法用来指定this指向哪个对象，区别是传参方式不同而已，示例如下

Math.max.apply(null, [3, 5, 4]); // 传入this和参数列表
Math.max.call(null, 3, 5, 4); //传入this和各个参数

23.装饰器
利用函数的apply方法，我们可以动态改变函数行为，比如可以先用一个变量保存原函数，然后修改原函数，必要时可以在其中调用原函数，比如修改window的parseInt方法

var count = 0;
var oldParseInt = parseInt;
window.parseInt = function () {
    count++;
    return oldParseInt.apply(null, arguments); //调用原方法
}

24.高阶函数Higher-order function
高阶函数就是接收函数作为参数的函数。常见的比如Array的map和reduce，它们都可以接收一个函数作为参数。
在调用map等函数时一定需要注意函数的定义，比如map函数的定义是传入3个参数到入参函数中，结果可能会与预期不符。

node基础
node项目通过package.json配置， 使用npm或者yarn下载依赖，其中package.json中可以配置script然后通过npm run 'command’来执行对应的脚本，如果command为start则直接执行npm start即可。

##简单熟悉es6
预期时间：1天
参考地址http://es6.ruanyifeng.com
let和const命令
变量的结构赋值
字符串的扩展
正则的扩展
数值的扩展
函数的扩展
数组的扩展
对象的扩展
Promise对象
async函数
Class的基本语法
Class的继承

##react框架
预期时间：2天
参照https://reactjs.org/docs/getting-started.html

##react native