zzzz-bang

> React在构建虚拟DOM的同时，还构建了自己的事件系统；且所有事件对象和W3C规范保持一致。React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定 - 事件自动绑定 - 在JavaScript中创建回调函数时，一般要将方法绑定到特定的实例，以保证this的正确性； - 在React中，每个事件处理回调函数都会自动绑定到组件实例（使用ES6语法创建的例外）； - 注意：事件的回调函数被绑定在React组件上，而不是原始的元素上，即事件回调函数中的this所指的是组件实例而不是DOM元素 - 箭头函数 - 正常情况下tihs都指向window，而react里面只能指向组件实例不能指向window，当this向发生改变不指向组件时指向就会丢失就成了未定义 - 我们知道jsx的原理本质上是React.createElement（），而React.createElement（）有三个参数 - 第一个参数html标签的名字 - 第二个参数是传入的标签属性 传入的属性是以键值对的格式传入 - 第三个属性是节点要显示的内容 - 所以在第二个参数传入标签属性的时候，这时this就丢失了 - 解决办法 - function() {}...

- 浏览器加载一个有 标签的网站发生的事情: - 拉取 HTML 页面 - 开始解析 HTML - 解析到 标签之后准备获取 script 文件 - 浏览器获取script文件。同时，html 解析中断并且阻断页面上其他html的解析。 - 一段时间后，script下载完成并且执行。 - 继续解析HTML文档的其他部分 - 解决阻断方案-无视位置 - 现在浏览器script标签支持 async 和 defer 属性....

**默认绑定** 如果是一般函数,this指向全局对象window，在严格模式下"use strict",为undefined. **隐式绑定** 对象的方法里调用,this指向调用该方法的对象. **显式绑定** 对于call、apply、bind的这三种调用方式都是属于显式绑定，作用是通过显示传入一个对象，改变this的上下文为此对象。call和apply是直接改变上下文对象直接调用，而bind是返回一个已经显示绑定的上下文的函数 **new绑定** 构造函数里的this,指向创建出来的实例. **一般情况下：new绑定 > 显式绑定 > 隐式绑定 > 默认绑定**

- call - 改变 this 指向 - 先看看怎么改变 this 的指向问题。call 这个方法是属于函数的，所以我们要实现的类似功能方法的话，需要给在构造函数上的原型上绑定自定义方法 - 处理传入的参数 - 把绑定上下文和arguments结合在一起 - apply - call 和 apply 的在使用的时候，有个区别就是 apply 的参数必须是通过数组的形式 - bind - bind 和 call...

- 合理配置mode和devtool参数 - mode可以设置为development和production, 默认为production, 而production下默认会开启tree shaking。此时打包的速度会变慢。 - 缩小文件的搜索范围 - webpack打包时，如果你的代码中import或者require了别的模块或者第三方库，webpack会按照一定的规则去搜索这些模块。 - alias - include/exclude - noParse 告诉webpack不去解析noParse模块所依赖的库 - extensions 将使用频率较高的文件后缀优先写在前面 - 使用HappyPack开启多进程Loader转换 - 在webpack构建过程中，实际上耗费时间大多数在loader解析转换，以及代码的压缩中。日常开发中我们需要使用loader对js, css, img, fonts文件做转换，并且转换的文件数据量也非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，需要一个个文件进行处理。HappyPack的基本原理是将这些任务分配到子进程中进行处理，子进程处理完毕把结果发送到主进程中，从而减少构建时间。 - 使用webpack-parallel-uglify-plugin压缩代码...