原生/Hybird/RN

对比

形式 介绍 优势 劣势
原生 使用原生语言进行编写开发 性能好/有生态圈的优势点 各个平台有各自的语言,学习成本大,不兼容
Hybrid App混合开发 使用前段代码,在各个平台上有他的容器WebView,利用他进行渲染 跨平台,适合简单应用 性能不是很好
RN 较于前面两者之间,使用JS开发,翻译成原生组件进行展示 学习成本低,天然跨平台,无审核热更新,具有优秀的社区能力(开源库) 性能

ECMAScript

名词解释:ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMA-262标准的实现和扩展。

简单的说:ECMAScript是一种标准文本语法,JS是根据其进行设计的

变量和常量生命

1
2
3
4
5
6
let greeting = 'hi'; // 新式写法,推荐使用
var greeting1 = 'hi1'; //老式写法,不推荐使用
const answer = 4;
// 多个生命简单些发
let a = '1'; b = '2';
// 没有声明或者声明后没有赋值的变量值为常量

箭头函数

1
(a,b) => a+b;
  • class外部:

    1
    let 函数名 = (参数) => { 内部逻辑 };
  • class内部:

    1
    2
    3
    4
    5
    class SomeComponent extends Component {
    方法名 = (参数) => {
    // 内部逻辑
    };
    }

可能并不是很习惯这种写法,联想方案
f(x) = πx^2
(x) => 3.14 x x
输入 => 输出
参数 => 返回表达式

  • Tips:这里有个坑,如果箭头函数的代码块部分使用了大括号,则此时切莫忘了使用return语句返回:
  • () => 1 // 返回1
  • () => { 1 } // 返回 undefined
  • () => { return 1; } // 返回1

扩展运算符

…扩展运算符好比是把一个压缩包给解压到当前目录

1
2
3
4
5
6
7
8
9
10
// 数组
// 数组
let a = [1, 2, 3]
console.log(...a) // 1 2 3
console.log(1, ...a, 5) // 1 1 2 3 5
// 对象
let z = { a: 3, b: 4 };
let n = { ...z };
console.log(n) // { a: 3, b: 4 }

解构

可以想象成一个语法糖,可以帮助你快速的从对象中获取数据

1
2
3
4
5
6
7
8
9
// 数组
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3
// 对象
var props = { checked: false, data: { count: 3, price: 100 } };
// 从props中拿到checked的值和count值
var { checked, data: { count } } = props;
console.log(checked, count); // false 3

数组的新增方法

1
2
3
4
5
6
7
8
9
10
11
12
13
// 数组查找元素
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
// 字符串也可用
‘hello’.includes(‘hell’); // true
// map返回等长的新数组
let odds = [1, 3, 5, 7, 9];
let evens = odds.map(i => i + 1); // [2, 4, 6, 8, 10]
// 使用标记技巧
let names = [‘tom’, ‘jerry’];
let nameTags = names.map(n => <Text>{n}</Text>)

推荐书籍

  1. MDN(Mozilla开发者网络)
  2. ECMAScript 6 入门(阮一峰)

Node.js

为什么RN需要Node.js

  1. 提供React Packager的运行环境
  2. 提供npm包管理器来安装第三方模块 (node_modules)
  3. 提供一些可参考的代码规范(commonjs)

RN的基本架构

IMAGE

npm使用

  1. npm依赖于同级目录下一个package.json文件进行,仓库的下载和依赖管理。没有这个文件可以使用npm init进行创建
  2. npm install (npm i)包安装器
    • 附加命令 -g,安装在系统根目录中,比如说react-native-cli
    • –save/-S 查找仓库中某某库的方法下载,并且安装,填写进入package.json文件
  3. npm下载的库都会存放在同级目录下的node_modules文件夹中,此文件夹随用随装,原则上不复制、不移动、不修改、不上传

导入导出概念

  1. JS本身没有模块的概念,他们之间是无法自由引用的。所以node.js制定了commonjs模块贵方,方便了拆分和引用代码参考链接
  2. 提供两种引用的语法

    • ES5 不推荐

      1
      2
      module.exports = moduleA; // a.js导出moduleA模块
      var moduleA = require(’./a’) // 同级目录下的B模块导入moduleA模块
    • ES6 推荐使用

      1
      2
      export default moduleA; // a.js导出模块A
      import moduleA from ’./a’ // b.js目录下导入同级目录的a.js文件的某个模块
  3. 模块查找/引用规则:

    • require(‘ooxx’) – 引用node_modules/ooxx/index.js,或是node_modules/ooxx/package.json中main字段所指定的js文件
    • require(‘./a’) – 引用同目录下的a.js文件。注意 ./ 不能省略,.js后缀可写可不写
    • require(‘../a/b’) – 引用父目录中的a目录中的b.js文件;若b为目录名,则查找引用b目录中的index.js文件。

npm仓库是需要翻墙的,可以使用国内的淘宝源,使用下述命令进行源的切换
npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global

知识点储备

  1. 所有的JS文件,都会被package打包整合进入main.jsbundle文件中。
  2. main.jsbundle文件可以通过pushby/codepush(微软)进行发布后的热更新。

书籍网站推荐推荐

JS相关

  1. JavaScript 权威指南(第6版)
  2. JavaScript 高级程序设计(第3版)
  3. JavaScript 语言精粹

1和2为基础,二选一去看,3为使用技巧上的一些东西