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
网友评论