react&node必须掌握的知识点

2018-12-01 本文已影响1人全栈弄潮儿

react-router-redux

push(location: LocationDescriptor, state?: LocationState): RouterAction;
replace(location: LocationDescriptor, state?: LocationState): RouterAction;
go(n: number): RouterAction;
goBack(): RouterAction;
goForward(): RouterAction;

react-router按需加载

path
将匹配的路由，也就是以前的 path。

getComponent
对应于以前的 component 属性，但是这个方法是异步的，也就是当路由匹配时，才会调用这个方法。

require.ensure(dependencies, callback, chunkName)
这是 webpack 提供的方法，这也是按需加载的核心方法。第一个参数是依赖，第二个是回调函数，第三个就是上面提到的 chunkName，用来指定这个 chunk file 的 name。

如果需要返回多个子组件，则使用 getComponents 方法，将多个组件作为一个对象的属性通过 cb 返回出去即可。这个在官方示例也有，但是我们这里并不需要，而且根组件是不能返回多个子组件的，所以使用 getComponent。

indexRoute
用来设置主页，对应于以前的 <IndexRoute>。

注意这里的 indexRoute 写法，这是个对象，在对象里面使用 getComponent。

childRoutes
这里面放置的就是子路由的配置，对应于以前的子路由们。我们将以前的 /baidu、/404 和 * 都拆了出来，接下来将分别为他们创建路由配置。

redux-thunk

Action

Action就是一个对象，一个必须带key为type的对象

Reducer

纯函数，函数名次自己随便定义都可以，但是函数的参数只能是state与action,可以简单的理解为一个工厂函数，传递一个旧的state通过加工后产出一个新的state
举个栗子

function count(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + 1;
        default:
            return state;
    }
}

Store

store是一个全局对象

将action和reducer以及state联系在一起，主要职责:

维护应用的state
提供getState()方法获取state
提供dispatch(action)方法更新state
通过subscribe(方法)注册监听器

store引用reducer
reducer引用action

使用需要引用store和action

html-webpack-plugin

利用ejs模板的语法来动态插入各自页面的thunk和css样式

eg:

<!DOCTYPE html>
<html style="font-size:20px">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
</head>
<body>
<div id="app"></div>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
</body>
</html>

Promise缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

CommonJS

CommonJS 用于服务器
CommonJS 模块就是对象，输入时必须查找对象属性
这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”

es6模块

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入
这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高
没法引用 ES6 模块本身，因为它不是对象
ES6 模块是编译时加载，使得静态分析成为可能
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";
ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this
优点:
不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
将来浏览器的新 API就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性
不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供

export

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系
export命令可以出现在模块的任何位置，只要处于模块顶层就可以

import

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行
由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构
如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次
import语句是 Singleton 模式

import()

import()返回一个 Promise 对象
import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。
import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同
import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

import()的一些适用场合

（1）按需加载 import()可以在需要的时候，再加载某个模块
（2）条件加载 import()可以放在if代码块，根据不同的情况，加载不同的模块
（3）动态的模块路径 import()允许模块路径动态生成

import(f())
.then(...);

Class 的静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。
如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”
注意，如果静态方法包含this关键字，这个this指的是类，而不是实例
静态方法可以与非静态方法重名
父类的静态方法，可以被子类继承

Class 的静态属性和实例属性

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性

class Foo {
}

Foo.prop = 1;
Foo.prop // 1

目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性

新提案：

类的实例属性可以用等式，写入类的定义之中

class MyClass {
  myProp = 42;

  constructor() {
    console.log(this.myProp); // 42
  }
}

类的静态属性只要在上面的实例属性写法前面，加上static关键字就可以了

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}

new.target 属性

该属性一般用在构造函数之中，返回new命令作用于的那个构造函数
这个属性可以用来确定构造函数是怎么调用的

module.exports与exorts的区别

exports是module.exports的一个引用
require引用模块后，返回给调用者的是module.exports而不是exports
exports.xxx，相当于在导出对象上挂属性，该属性对调用模块直接可见
exports= 相当于给exports对象重新赋值，调用模块不能访问exports对象及其属性
如果此模块是一个类，就应该直接赋值module.exports，这样调用者就是一个类构造器，可以直接new实例

express中间件

中间件会按照载入的顺序和地址,依次向下执行,你可以把中间件当作一个流水线

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

微信公众号.png

前端最火框架排行榜——小程序二维码

前端排行榜.png