react native总结-1

2020年1月2日

需求和项目都基本写完了，需要重点梳理下开发的过程。以满足后期回顾的需要。

react 介绍

React出生在Facebook。当初Facebook要搭建一个Instagram网站，在选择框架时，对市场上的所有JavaScript的MVC框架都不太满意，于是Facebook自己搞了一套，就是React。后来发现React框架非常好用，便在2013年5月开源了。

react

https://github.com/facebook/react

https://github.com/facebook/react-native

在学习React之前，读者应该对以下知识进行了解:

·Node.js:基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞I/O的模式，使其轻量又高效。

·npm: node的一个包管理工具，主要功能是对node包的安装、卸载、更新、查看等。

·webpack:前端资源加载/打包工具，可以依据模块的依赖关系进行静态分析，按照一定规则将这些模块生成静态资源。

·ES6:也称为ES2015，是在2015年6月发布的JavaScript语言的下一代标准，旨在编写大型应用程序，成为一种企业级开发语言。

npm

简单来说npm(Node Package Manager)是包含在Node.js里面的一个包管理工具，npm为开发者提供了一个代码模块共享的大平台，开发者既可以从npm服务器上下载其他开发人员共享的package，也可以上传自己的package供其他开发者使用。

npm scripts指的是npm脚本，其主要用途是执行配置文件(package.json)中 “scripts”属性对应的脚本语句。在理解npm scripts之前，这里先介绍一下package.json文件。

npm init

package.json文件内容多了几个字段，private、dependencies、devDependencies 和scripts。private指包的私有属性，如果设置为true，则npm会拒绝发布，主要是为了避免私有repositories不小心被发布出去。

dependencies和devDependencies两个配置字段都是用来安装依赖包的，区别在于前者安装项目运行所依赖的模块，后者安装项目开发所依赖的模块。

webpack

在没有出现模块管理器之前的前端开发，如果要引用依赖资源，通常的做法是将依赖文件引用到.html文件中。比如，要引用js文件，在html文件中用script标签引用;引用.css文件，在.html文件中用标签引用。这样做的弊端是，如果引用的资源文件太多，请求太多，会拖慢网页加载速度，影响用户体验，另外也会使网页体积臃肿、不便维护。随着模块管理器的出现，上述问题得到解决。

webpack是前端的一个模块管理工具，其可依据各个模块之间的依赖关系进行静态分析，然后将这些模块按照相应规则生产静态资源供项目调用。

webpack可以将具有各种依赖关系的静态模块转化成一个独立的静态模块，这样做的好处是大大减少了请求次数，提高了网页的性能，用户体验也随之提高。

webpack主要有4个核心概念:

·入口(entry):webpack所有依赖关系图的起点。

·出口(output):指定webpack打包应用程序的地方。

·加载器(loader):指定加载的需要处理的各类文件。

·插件(plugins):定义项目要用到的插件。

npm install -g webpack 全局安装

ES6

ECMAScript6(简称ES6)历时将近7年时间，在2015年6月份正式发布，由于这个新标准是在2015年指定，所以ES6也称为ES2015。ES6带来很多新语法、新特性，比如箭头函数(= >)、class(类)、模板字符串等。

map()方法：map，映射，即原数组映射成一个新的数组；

map方法接受一个新参数，这个参数就是将原数组变成新数组的映射关系。

ES6 array.map()用法

定义：对数组中的每个元素进行处理，得到新的数组；

特点：不改变原有数据的结构和数据

const array = [1, 3, 6, 9];
const newArray = array.map(function (value) {
return value + 1;
});
console.log(newArray);
console.log(array);

还有一种另外的写法，使用箭头函数

const array = [1, 3, 6, 9];
const newArray = array.map(() => {return value + 1 });
console.log(newArray);
console.log(array);

结果：
[2, 4, 7, 10]
[1, 3, 6, 9]

类似方法： for in , for , foreach

const newArray2 = [];
for (var i in array) {
newArray2.push(array[i] + 1);
}
const newArray3 = [];
for (var i = 0; i < array.length; i++) {
newArray3.push(array[i] + 1);
}

const newArray4 = [];
array.forEach(function (key) {
newArray4.push(key * key);
})
console.log(newArray2);
console.log(newArray3);
console.log(newArray4);
console.log(array);

结果：

[2, 4, 7, 10]
[2, 4, 7, 10]
[2, 4, 7, 10]
[1, 3, 6, 9]

对比：

1、.map()方法使用return，进行回调；其他方法可不需要。
2、.map()方法直接对数组的每个元素进行操作，返回相同数组长度的数组；其他方法可扩展数组的长度。
3、. map() 不会对空数组进行检测。

ES6 map()用法

map()方法：map，映射，即原数组映射成一个新的数组；
map方法接受一个新参数，这个参数就是将原数组变成新数组的映射关系。
Map 是 ES6 中新增的数据结构，Map 类似于对象，但普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型…

Map 的用法和普通对象基本一致，先看一下它能用非字符串或者数字作为 key 的特性。

const map = new Map();
const obj = {p: 'Hello World'};
map.set(obj, 'OK')
map.get(obj) // "OK"
map.has(obj) // true
map.delete(obj) // true
map.has(obj) // false

需要使用new Map()初始化一个实例，下面代码中set get has delete顾名即可思义（下文也会演示）。其中，map.set(obj, ‘OK’)就是用对象作为的 key （不光可以是对象，任何数据类型都可以），并且后面通过map.get(obj)正确获取了。

Map 实例的属性和方法如下：
size：获取成员的数量
set：设置成员 key 和 value
get：获取成员属性值
has：判断成员是否存在
delete：删除成员
clear：清空所有

const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);
map.size // 2
map.get('aaa') // 100
map.has('aaa') // true
map.delete('aaa')
map.has('aaa') // false
map.clear()

Map 实例的遍历方法有：
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。

const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);
for (let key of map.keys()) {
console.log(key);
}

// "aaa"
// "bbb"
for (let value of map.values()) {
console.log(value);
}
// 100
// 200
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// aaa 100

本地开发环境

npm

https://nodejs.org/en/download/current/

2009年Ryan正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为 Node.js，简称Node。Node是一个基于Chrome V8引擎的JavaScript运行环境，使用事件驱动、非阻塞的I/O模型，使其轻量而高效。简单来说，Node是运行在服务器端的JavaScript。

node 安装成功之后

react 与传统jQuery对比

jQuery是由约翰·雷西格(John Resig)在2006年1月份发布的一套跨浏览器JavaScript 库，极大地简化了HTML与JavaScript之间的操作。当时深受前端开发人员的欢迎，jQuery在操作DOM、处理事件等方面带来了福音，使得开发效率得到空前提升。

随着时间慢慢推移，人们在开发一些比较复杂的大型项目时，传统的jQuery变得越来越难用:一方面是性能问题，由于jQuery经常性地操作DOM元素，会消耗大量的运行时间;另一方面，用jQuery去编写复杂的DOM操作，代码会有大量堆积现象，很难维护。当然，jQuery流行多年，自然有其独特的优点，和当下流行的React相比，各有秋色，只是分项目类型而已。