2019-06-25

CSS

Flex弹性布局

容器的属性:
flex-direction: 决定主轴的方向 row行左从左到右、row-reverse行右从右到左、column列从上到下、column-reverse行从下到上
flex-wrap: 如何换行 normal单行排列、wrap多行自上而下、wrap-reverse多行自下而上
flex-flow: 是flex-direction和flex-wrap的简写形式
justify-content: 定义了项目在主轴上的对齐方式 flex-start从起点线开始排序、flex-end从终点线开始排序、center居中布局、space-between项目均匀分布第一项在起点线最后一项在终点线、space-around项目均匀分布每个项目两侧有相同的留白,项目之间的距离为留白之和、space-evenly项目均匀分布项目距离和项目与边框距离相等
align-items: 定义项目在交叉轴上如何对齐 flex-start交叉轴起点对齐、flex-end交叉轴终点对齐、center交叉轴中间对齐、baseline交叉轴第一行文字基线对齐
align-content: 定义了多根轴线的对齐方向及额外空间分配(类似justify-content) flex-start从起点线开始排序、flex-end从终点线开始排序、center居中排序、space-between项目均匀分布第一项在起点线最后一项在终点线、space-around项目均匀分布、每个项目上下有相同留白项目距离为留白之和

项目属性:
order: 定义项目的排列顺序。数值越小,排列越靠前 默认值0 可以为负值
flex-grow: 定义项目的放大比例 默认值0 负值无效
flex-shrink: 定义项目的缩小比例 默认值 0表示不缩小 负值无效
flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间
flex: flex-grow, flex-shrink和flex-basis的简写
align-self: 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

介绍css3中position:sticky
粘性定位可以被认为是相对定位和固定定位的混合。
该元素定位不对后续元素造成影响,当元素被粘性定位时,后续元素的位置仍按照该元素未定位时的位置来确定

CSS3新特性有哪些
边框:border-radius、box-shadow、border-image
背景:background-image、background-size、background-origin、background-clip
渐变:linear-gradient(线性渐变)、radial-gradient(径向渐变)
文本效果:text-shadow、text-overflow(如何显示溢出内容)、word-wrap(换行)、word-break(指定换行规则)
字体:@font-face
2D转换(transform):translate(位移)、rotate(旋转)、scale(缩放)、skew(翻转)、matrix(将所有2d转换方法组合在一起)
3D转换:translate、rotate、scale多一个Z轴或者3d
过渡(transition):元素从一种样式逐渐变成另一种的效果。transition是简写的四种属性,属性名称(transition-property) 过渡花费时间(transition-duration) 过渡效果(transition-timing-function) 过渡延迟执行时间(transition-delay)
transition-timing-function: linear(匀速) ease(慢-快-慢) ease-in(慢-快) ease-out(快-慢) ease-in-out(慢-快-慢)
动画:@keyframes animation(简写属性、用于设置六个动画属性)
animation: animation-name(动画名称)、animation-duration(动画时间)、animation-timing-function(动画的速度曲线)、animation-delay(动画延迟执行时间)、animation-iteration-count(动画播放的次数)、animation-direction(是否轮流反向播放动画)

JS

每个实例对象都有一个私有属性(proto)指向它构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(proto),层层往上直到一个对象的原型对象为Null。

遵循ECMAScript标准,someObject.[[Prototype]]符号用于执行someObject的原型。从ES6开始,[[Prototype]]可以通过Object.getPrototypeOf()和Object.setPrototypeOf()访问器访问。这个等同于JavaScript的非标准但许多浏览器实现的属性proto
但它不应该与构造函数func的prototype属性相混淆。被构造函数创建的实例对象的[[prototype]]指向func的prototype属性。Object.prototype属性表示Object的原型对象

原型链的定义:每个对象拥有一个原型对象,对象以其原型为模板,从原型继承属性和方法。原型对象也拥有原型,并从中继承方法和属性,一层一层,以此类推,这种关系常被称为原型链。

proto和prototype:对象的原型proto与构造函数的prototype属性之间的区别,前者是每个实例上都有的属性,后者是构造函数的属性。也就是说,Object.getPrototypeOf(new Foobar())和Foobar.prototype指向着同一个对象。

prototype:每个函数都有一个特殊的属性叫做prototype

什么是原型和原型链?
每个对象都有一个私有属性(proto)指向它构造函数的原型对象(prototype)。
对象从原型继承属性和方法。原型对象也有自己的原型对象,层层往上直到一个对象的原型对象为null,这种关系被称为原型链。注:proto是javascript非标准但浏览器实现的属性

继承方法有哪些?
1.对象冒充
继承ClassA的方法,最后删除对ClassA的引用
function ClassA () {}
function ClassB () {
this.newMethod = ClassA;
this.newMethod(args);
delete this.newMethod;
}

2.call()方法
使用call()方法指定this的指向,实现继承。
function ClassB (color, name) {
ClassA.call(this, color);
this.name = args;
this.sayName = function () {
return this.name;
}
}

3.apply()方法
与call()方法继承一样。区别是call和apply的区别,参数传递不一样

4.原型链
function ClassA() {}
ClassA.prototype.color = 'blue';
ClassA.prototype.getColor = function () {
return this.color;
}
function ClassB () {};
ClassB.prototype = new ClassA();
使用原型链继承,将需要父类实例赋值给子类原型对象,可继承所有的属性和方法。
缺点是:原型链上的属性和方法修改,子类也会被影响,没有传递参数。

5.组合继承
使用构造函数定义属性,用原型定义方法;用对象冒充继承构造函数的属性,用原型链继承prototype对象的方法
function ClassA (color) {
this.color = color;
}
ClassA.prototype.getColor = function () {
return this.color;
}
function ClassB (color, name) {
ClassA.call(this, color);
this.name = name;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
return this.name;
}
缺点:父类的构造函数被调用两次。
a.设置子类原型对象,调用一次;ClassB.prototype = new ClassA();
b.实例化对象时调用一次;ClassA.call(this, color);

6.寄生式继承
在不需要实例化父类构造函数时,也能继承父类原型对象上的方法;
function InheritPrototype (child, father) {
var prototype = Object.create(father.prototype); // 浅拷贝父类的原型对象
prototype.constructor = child; // 指向原型对象的构造器为子类
child.prototype = prototype; // 将原型对象赋值给子类的原型对象
}

new的作用?
1.创建一个空的对象;
2.设置该对象的构造函数到另一个对象;
3.将新创建的对象作为this的上下文;
4.如果该函数没有返回对象,则返回this;

事件循环机制是什么?
1.运行时概念:
函数调用形成一个栈帧,放到栈中,根据后进先出原则直到栈清空;
对象被分配到一个堆中,即用以标识一大块非结构化的内存区域;
一个javascript运行时包含了一个待处理的消息队列。每一个消息都关联这一个用以处理这个消息的函数。

2.JAVASCRIPT事件循环的运行机制:
1.所有同步任务都在主线程上执行,形成一个执行栈;
2.主线程之外,还存在一个任务队列。只要异步任务有了运行结果,就在任务队列之中放置一个事件;
3.一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,那些对应的异步任务于是结束等待状态,进入执行站开始执行;
4.主线程不断重复上面的第三步;
JS只有一个主线程,主线程执行完执行栈的任务后去检查异步的任务队列,如果异步事件触发,则将其加到主线程的执行栈,主线程不断重复这个过程;

vue和react的哪里不同?
1.React严格上只针对MVC的view层,Vue则是MVVM模式
2.virtual DOM不一样。vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树
而对React而言,每当应用的状态被改变时,全部组件都会重新渲染,如要避免不必要的子组件重新渲染需要用shouldComponentUpdate.
3.组件写法不一样。React推荐使用JSX。Vue推荐用webpack + vue-loader的单文件组件格式,即html,css,js写在同一个文件。
4.数据绑定:vue实现了数据的双向绑定,react数据流动是单向的
5.state对象在react应用中不可变,需要使用setState方法更新状态;
vue在state对象不是必须的,数据由data属性在vue对象中管理

常见Http请求头

  1. Accept 可接受的响应内容类型 Accept: text/plain
  2. Accept-Charset 可接受的字符集 Accept-Charset: utf-8
  3. Accept-Encoding 可接受的响应内容的编码方式 Accept-Encoding: gzip, deflate
  4. Accept-Language 可接受的响应内容语言列表 Accept-Language: en-US
  5. Accept-Datetime 可接受的按照时间来表示的响应内容版本 Accept-Datetime: xxx
  6. Authorization 用于表示HTTP协议中需要认证资源的认证信息 Authorization: Basic OSdjJGRpbjpvcGVuIANlc2SdDE==
  7. Cache-Control 用来指定当前的请求/回复中的,是否使用缓存机制 Cache-Control: no-cache
  8. Connection 客户端想要优先使用的连接类型 Connection: keep-alive
  9. Cookie 由之前服务器通过Set-Cookie设置的一个HTTP协议Cookie
  10. Content-Length 以8进制表示的请求体的长度 Content-Length: 348
  11. Content-MD5 请求体的内容二进制MD5散列值,以Base64编码的结果
  12. Content-Type 请求体的MIME类型 Content-Type: application/x-www-form-urlencoded
  13. Date 发送该消息的日期和时间
  14. Expect 表示客户端要求服务器做出特定的行为
  15. From 发起次请求的用户的邮件地址
  16. Host 表示服务器的域名以及服务器所监听的端口号
  17. Origin 发起一个针对跨域资源共享的请求
  18. User-Agent 浏览器的身份标识字符串

防抖和节流?
防抖:函数在频繁需要触发情况时,只有等足够空闲的时间才去执行一次。
节流:预定一个函数只有在大于等于执行周期的时候才去执行

介绍观察者模式
意图:定义对象间一种一对多的依赖关系,当一个对象状态发生改变时,所有依赖它的对象都会得到通知并被自动更新
主要解决:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作

介绍中介者模式
意图:用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式的相互引用,从而使其耦合松散,而且可以独立的改变它们之间的交互。
主要解决:对象与对象之间存在大量的关联关系,这样势必会导致系统的结构变得很复杂,同时若一个对象发生改变,我们也需要跟踪与之相关联的对象,同时做出相应的处理。

观察者和订阅-发布的区别,各自用在哪里
观察者由具体目标调用,订阅-发布是统一由调度中心调用。
观察者模式的订阅者与发布者存在依赖关系,而订阅-发布模式不会。

介绍http2.0新特性

  1. 在应用层(HTTP)和传输层(TCP)之间增加一个二进制分帧层
    二进制分帧:在二进制分帧层上,HTTP2.0会将所有传输信息分割为更小的消息和帧,并对它们采用二进制格式的编码将其封装
  2. 首部压缩:所有首部键必须全部小写
  3. 流量控制
  4. 多路复用
  5. 请求优先级
  6. 服务器推送

通过什么做到并发请求
Promise处理并发请求

浏览器事件流向
DOM事件传播包括三个阶段:

  1. 捕获
  2. 事件目标处理函数
  3. 冒泡

介绍事件代理以及优缺点
事件委托原理:事件冒泡机制
优点:

  1. 大量节省内存占用,减少事件注册
  2. 可以实现当新增子对象时,无需再对其进行事件绑定
    缺点:
    上诉1中的需求才会使用,使用场景少。如果把所有事件都用事件委托,可能会出现事件误判

tcp3次握手
第一次握手:建立连接时,客户端发送syn包到服务器,并进去SYN_SENT状态,等待服务器确认;(SYN: 同步序列编号)
第二次握手:服务器收到syn包,必须确认客户端的syn,同时自己也发送一个syn包,此时服务器进入SYN_RECV状态;
第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK,此包发送完毕,客户端和服务器进入established状态,完成三次握手

bind、call、apply的区别
相似之处:

  1. 都是用来改变函数的this指向
  2. 第一个参数都是this指向的对象
  3. 都可以利用后续参数传参
    区别:
    call和apply都是对函数的直接调用
    call后续参数是单独一个一个传
    apply第二个参数是一个数组
    bind方法返回的仍然是一个函数

闭包的定义和作用
闭包是有权访问另一个函数作用域中变量的函数。
特性:

  1. 函数外部的代码无法访问函数体内部的变量,而函数体内部的代码可以访问函数外部的变量
  2. 即使函数已经执行完毕,在执行期间创建的变量也不会销毁,因此每运行一次函数就会在内存中留下一组变量。

介绍下跨域
跨域是指协议、域名、端口不一致,出于安全考虑,跨域的资源之间无法交互。

跨域解决方案

  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe 跨域
  5. postMessage跨域
  6. 跨域资源共享(CORS)
  7. nginx代理跨域
  8. nodeJs中间件代理跨域
  9. WebSocket协议跨域: 是HTML5一种新协议,实现了浏览器和服务器全双工通信,同时允许跨域通信

ES6

ES6的新特性有哪些?

  1. let和const
  2. 字符串模板
  3. 变量的解耦赋值
  4. 箭头函数
  5. Array.from Array.of
  6. Set数据结构(类似数组,但是成员的值都是唯一的,没有重复的值)
  7. Proxy 作用是对目标对象提供拦截行为
  8. Promise对象
  9. async 函数
  10. module语法

箭头函数的注意点:

  1. 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  2. 不可以当做构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  3. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用rest参数代替。
  4. 不可以使用yield命令,因为箭头函数不能作为Generator函数

ES6模块和CommonJS模块的差异:

  • CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用
    CommonJS模块输出一个值,模块内部的变化不会影响该值,除非写一个函数才能获取内部改动后的值。
    ES6输出的值,如果原始值改变,那输出的值也会跟着变。
  • CommonJS模块是运行时加载,ES6模块是编译时输出接口
    CommonJS记载的是一个对象,该对象只有在脚本运行完才会生成。
    ES6模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

promise、async有什么区别?

  1. Async是基于Promise实现的,它不能用于普通的回调函数
  2. Async使得异步代码看起来像同步代码
  3. Async函数会返回一个Promise对象
  4. Async让 try/catch可以同时处理同步和异步错误
  5. Async函数让代码更简洁,更符合语义

Webpack

Webpack3和Webpack4有什么区别?
1.webpack4新增mode选项。根据配置类型将其设置为生产或开发。
2.弃用部分插件,包括压缩js的UglifyJsPlugin,DefinePlugin创建一个在编译是可以配置的全局常量的插件;
压缩插件改用Optimization选项,DefinePlugin内置到new Webpack里面

webpack4常用Loading有哪些?
babel-loader:允许使用babel和webpack转译js文件
css-loader
postcss-loader
sass-loader
style-loader
less-loader
url-loader
file-loader

webpack4常用的plugin有哪些?
webpack.Defineplugin:允许创建一个在编译时可以配置的全局常量
webpack.HotModuleReplacementPlugin:热替换模块
webpack.optimize.LimitChunkCountPlugin:可以通过合并的方式,处理你的chunk,以减少请求数
UglifyjsWebpackPlugin:压缩JS代码
htmlWebpackPlugin
CleanWebpackPlugin

webpack配置优化
优化Loader配置: 1. 优化正则匹配 2.通过cacheDirectory开启缓存 3. 通过include、exclude来减少被处理的文件
优化resolve.modules配置
优化resolve.alias配置,通过别名来将原导入路径映射成一个新的导入路径
优化resolve.extensions配置,常用的后缀放在前面,而且后缀列表要尽可能的小
减少冗余代码 babel-plugin-transform-runtime
使用HappyPack多进程解析和处理文件
开启模块热替换
提取公共代码 chunk(相同资源被重复加载,首屏加载缓慢的问题)
按需加载代码
优化SourceMap
mode模式

React

React组件生命周期的阶段是什么?
React组件的生命周期有三个不同的阶段:

  1. 初始渲染阶段:这是组件即将开始其生命之旅并进入DOM的阶段
  2. 更新阶段:一旦组件被添加到DOM,它只有在prop或状态发生改变时才能更新或重新渲染。
  3. 卸载阶段:这是组件生命周期的最后阶段,组件被销毁并从DOM中删除。

React组件的生命周期方法

  1. componentWillMount() 在渲染之前执行,在客户端和服务端都会执行
  2. componentDidMount() 仅在第一次渲染后在客户端执行
  3. componentWillReceiveProps() 当从父类接收到props并且在调用另一个渲染器之前调用
  4. shouldComponentUpdate() 根据特定条件返回true或false。如果你希望更新组件,请返回true否则返回false。默认情况下,它返回false
  5. componentWillUpdate() 在DOM中进行渲染之前调用
  6. componentDidUpdate() 在渲染发生后立即调用
  7. componentWillUnmount() 从DOM卸载组件后调用,用于清理内存空间

React组件通信
父传子:使用props对象,包含需要传递给子组件的参数,props是不可修改的。传递方法:定义方法名传递一个函数进去
子传父:由于子组件不能修改props,需要修改props的值时,需要使用父组件传递的函数,调用传递的函数实际是父组件调用自己的函数,并修改自身的值,达到修改props的效果
兄弟:利用redux实现

React无状态函数
无状态函数是使用函数构建的无状态组件,无状态组件传入props和context两个参数,它没有state,除了render(),没有其他生命周期方法。

Context描述:
无需为每层组件手动添加props,就能在组件树间进行数据传递的方法。
创建一个Context对象
React.createContext(defaultValue);

说一说Forwarding Refs有什么用?
是父组件用来获取子组件的dom元素
const refs = React.createRef();
将refs传递给子组件,使用refs.current可以获取子组件的dom元素

render() {
<div>
<Child ref={ref}>
</div>
}
refs.current获取的就是Child这个组件,是一个对象{context: {}, props: {}, refs: {}, state: null, updater: {} ...}

如果使用React.forwardRef((props, ref) => (
<div><input ref={ref} /></div>
))
refs.current获取的就是子组件里的Input的DOM元素

简述一下virtual DOM如何工作?

  1. 当数据发生变化时,会引起组件重新渲染,整个UI都会以virtual DOM的形式重新渲染
  2. 然后收集差异也就是diff新的virtual dom和老的virtual dom的差异
  3. 最后把差异队列里的差异,比如增加节点、删除节点、移动节点更新到真实的DOM上

什么是受控组件和非受控组件?
受控组件是表单元素的值是通过React组件的state来控制的,并且使用onChange方法通过setState()更新state属性
非受控组件是表单数据将交由DOM节点来处理,使用ref从DOM节点中获取表单数据

什么是状态提升?
有时候几个组件需要共用状态数据的情况下,我们将共享的状态提升至他们最近的父组件当中进行处理。

Portals是什么?
portals提供了一种将子节点渲染到存在于父组件之外的DOM节点的方法。
ReactDOM.createPortal(child, container);
第一个参数child的任何可渲染的React子元素,例如一个元素、字符串或fragment
第二个参数container是一个DOM元素
一个从portal内部触发的事件会一直冒泡至包含React树的祖先,即使这些元素并不是DOM树中的祖先。

如何在React中使用innerHTML?
增加dangerouslySetInnerHTML属性,并且传去对象的属性名叫_html
如:<div dangerouslySetInnerHTML={{_html: '<span>innerHTML</span>'}}></div>

什么是Redux?
Redux是当今最热门的前端开发库之一。它是JavaScript程序的可预测状态容器,用于整个应用的状态管理。使用Redux开发的应用易于测试,可以在不同环境中运行,并显示一致的行为。

Redux遵循的三个原则是什么?

  1. 单一事实来源:整个应用的状态存储在单个store中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序。
  2. 状态是只读的:改变状态的唯一方法是去触发一个动作。动作是描述变化的普通JS对象。就像state是数据的最小表示一样,该操作是对数据更改的最小表示。
  3. 使用纯函数进行更改:为了指定状态树如何通过操作进行转换,你需要纯函数。纯函数是那些返回值仅取决于参数值的函数。

Redux的组件:

  1. Action:这是一个用来藐视发生了什么事情的对象
  2. Reducer:这是一个去欸的那个状态如何变化的地方
  3. Store:整个程序的状态/对象树保存在Store中
  4. View:只显示Store提供的数据

如何在Redux中定义Action?
React中的Action必须具有type属性,该属性指示正在执行的ACTION的类型。必须将它们定义为字符串常量,并且还可以向其添加更多的属性。

解释Reducer的作用
Reducers是纯函数,它他规定应用程序的状态怎样因响应ACTION而改变。Reducers通过接受先前的状态和action来工作,然后它返回一个新的状态。他根据操作的类型确定需要执行哪种更新,然后返回新的值。如果不需要完成任务,它会返回原来的状态。

Redux的Action
Action本质上是JavaScript普通对象。我们约定,action内必须使用一个字符串类型的type字段来表示将要执行的动作。多数情况下,type会被定义成字符串常量。当应用规模越来越大时,建议使用单独的模块或文件存放action;
{
type: 'ADD_TODO',
text: 'Build my first Redux app;
}
Action创建函数时生成action的方法
function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
Redux中只需把action创建函数的结果传给dispatch()方法即可发起一次dispatch过程
dispatch(addTodo(text));

Redux的Reducer
Reducer指定了应用状态的变化如何响应actions并发送到store的,记住actions只是描述了有事情发生了这一事实,并没有描述应用如何更新state。保持reducer纯净非常重要。永远不要在reducer里做修改传入参数、执行有副作用的操作、调用非纯函数
拆分reducer,每个reducer只负责管理全局state中它负责的一部分。每个reducer的state参数都不一样,分别对应它管理的那部分state数据。redux提供了combineReducers()工具来管理拆分后的reducer,保持其独立性并用于专门处理不同的数据域。combineReducers()所作的只是生成一个函数,这个函数会调用你的一系列reducer,每个reducer根据它们的key来筛选出state中的一部分数据并处理,然后这个生成的函数再将所有的reducer的结果合并成一个大的对象。combineReducers接收一个对象,可以把所有顶级的reducer放到一个独立的文件中,通过export暴露出每个reducer函数,然后import * as reducers得到一个他们名字作为key的object。

Redux的Store
Store是将action和reducers联系到一起的对象。职责:

  • 维持应用的state;
  • 提供getState()方法获取state;
  • 提供dispatch(action)方法更新state;
  • 通过subscribe(listener)注册监听器;
  • 通过subscribe(listener)返回的函数注销监听器;
    Redux应用只有一个单一的store,当需要拆分数据处理逻辑时,应该使用reducer组合而不是创建多个store
    import { createStore } from 'redux'
    import reducers from './reducers'
    let store = createStore(reducers);

Redux应用中数据的生命周期遵循4个步骤:

  1. 调用store.dispatch(action)
  2. Redux store调用传入的reducer函数
  3. 根reducer应该把多个子reducer输出合并成一个单一的state树
  4. Redux store保存了根reducer返回的完整state树

Redux容器组件
使用connect()方法链接展示组件,传入两个函数mapStateToProps、mapDispatchToProps,执行connect()方法传入展示组件
import { connect } from 'react-redux';
connect(mapStateToProps, mapDispatchToProps)(ComponentName)
function mapStateToProps(state) {
return {
text: state.text
}
}
function mapDispatchToProps(dispatch) {
return {
addTodo: text => dispatch(addTodoAction(text))
}
}

传入store
所有容器组件都可以访问Redux store,所以可以手动监听它。一种方式是把它以props的形式传入到所有容器组件中。但是太麻烦了。因为必须要用store把展示组件包裹一层,仅仅是因为恰好再组件树中渲染了一个容器组件。建议的方式是使用指定的React Redux组件<Provider>来让所有的容器组件都可以访问store,而不必显示的传递它。只需要在渲染根节点时来使用即可
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';

const store = createStore(reducers);
render(
<Provider store={store}>
<App />
</Provider>
)

异步Action时,使用Redux-thunk
使用redux-thunk库,通过使用指定的middleware,action创建函数除了返回action对象外还可以返回函数。这个action创建函数就成为了thunk。当action创建函数返回函数时,这个函数会被Redux Thunk middleware执行,这个函数不需要保持纯净;它还可以带有副作用,包括执行异步API请求。这个函数可以dispatch action。

使用Redux-thunk
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';

const store = createStore(
reducers,
applyMiddleware(thunk)
)

题目
对象自引用
严格模式
arguements
proxy reflect
柯理化 反柯理化
ajax的send
词法作用域,js回收机制
ast
模板语言是如何被渲染成html
vue指令
data在组件和vue实例的区别 mixin react高级方法 electron应用 链表和队列 git的使用 ts的使用 vue的原理 抓包 http请求 请求包 vuex 不同的vuex模块怎么调用 路由的模式 怎么在hash下消除# linux的使用 nginx端口多配置 option是哪个层进行处理的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容