09 2018 档案

摘要:Contents Stateless function JSX spread attributes Destructuring arguments Conditional rendering Children types Array as children Function as children 阅读全文
posted @ 2018-09-30 11:38 全玉 阅读(240) 评论(0) 推荐(0) 编辑
摘要:redux的connect方法是一个高阶组件,对包装的组件会在ShouldComponentUpdate中实现一个默认的浅比较。 connect形式如下: 其中options参数如下: [pure] (Boolean): 如果参数为true,用来避免重新渲染并调用mapStateToProps、ma 阅读全文
posted @ 2018-09-28 13:58 全玉 阅读(873) 评论(0) 推荐(0) 编辑
摘要:1. 分包 将不需要变动的第三方包分离出去, 主要方法有: (1). externals(2). DllPlugin (autodll-webpack-plugin可简化配置)(3). expose-loader(4). ProviderPlugin(4). IgnorePlugin 忽略不必要的内 阅读全文
posted @ 2018-09-28 10:24 全玉 阅读(1971) 评论(0) 推荐(0) 编辑
摘要:1. manifest manifest存储了webpack的chunk相关的信息。具体为一个对象,或者包含runtime的一段代码。其中包含着一个chunkId,已经对应chunkId的相关信息,例如异步模块的 文件名和路径 2. HashedModuleIdsPlugin 将打包出来的modul 阅读全文
posted @ 2018-09-27 09:50 全玉 阅读(175) 评论(0) 推荐(0) 编辑
摘要:css-loader原有的minimize选项在1.0.0版本已经移除,不能使用其进行css压缩。 目前可行的css压缩方案有: 1. postcss-loader with cssnano or use optimize-cssnano-plugin plugin 2. postcss with 阅读全文
posted @ 2018-09-23 18:12 全玉 阅读(1449) 评论(0) 推荐(0) 编辑
摘要://有缺陷,JSON.stringify(obj)中,如果obj本来是空的,又继承了一个非空的对象那么结果也会是“{}” 1. JSON.stringify(obj) == '{}' 2. Object.keys(obj).length == 0 //错误,当对象为空Array,length为1,空 阅读全文
posted @ 2018-09-23 18:00 全玉 阅读(3260) 评论(0) 推荐(0) 编辑
摘要:sourcemap在线上压缩文件调试中很重要,在此总结如下: 1. 开启sourcemap (1). 浏览器要开启source-map支持(2). 压缩文件底部要有source-map的URL,压缩要开启source-map(3). .map文件要放在服务器,source-map URL指向的位置 阅读全文
posted @ 2018-09-23 17:10 全玉 阅读(473) 评论(0) 推荐(0) 编辑
摘要:Mac要想添加锁屏快捷键,必须使用Automator。 1. 打开Automator,创建一个新的服务。 2. 在左侧栏中找到 启动屏幕保护 ,将其拖曳到右侧窗口内,并且修改 服务收到改为"没有收入"并且保存, 文件名设置为 启动屏幕保护。保存后, 你可以通过鼠标点击访问启动屏幕保护这个服务. 就在 阅读全文
posted @ 2018-09-22 22:44 全玉 阅读(547) 评论(0) 推荐(0) 编辑
摘要:正则表达式的量词有贪婪匹配和非贪婪匹配之分。 贪婪匹配: 匹配成功前提下,尽可能多的匹配非贪婪匹配: 匹配成功前提下,尽可能少的匹配 量词包括: 以上默认分为贪婪模式,若要改为非贪婪模式,只在量词后面加个?就行了: 1. 举例 输出:aaa 输出:aaa 输出: aaab 2. 应用 要匹配上面字符 阅读全文
posted @ 2018-09-19 16:33 全玉 阅读(298) 评论(0) 推荐(0) 编辑
摘要:汉字 [\u4e00-\u9fa5]非汉字且非英文字母 [^\u4e00-\u9fa5a-zA-Z]手机 0?(13|14|15|17|18)[0-9]{9}邮箱 \w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}IP ^((2[0-4]\d 阅读全文
posted @ 2018-09-19 15:36 全玉 阅读(250) 评论(0) 推荐(0) 编辑
摘要:React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用。 例如: 要根据user参数确定渲染Loading还是Profile组件 Render Callback Pattern的做法是: 关键是这句 this.props 阅读全文
posted @ 2018-09-17 19:44 全玉 阅读(1052) 评论(0) 推荐(0) 编辑
摘要:参考:https://stackoverflow.com/questions/25456013/javascript-deepequal-comparison# 阅读全文
posted @ 2018-09-17 19:14 全玉 阅读(1366) 评论(0) 推荐(0) 编辑
摘要:1、ES6语法的引入,砍掉了getDefaultProps和getInitialState getDefaultProps 使用 static default={}的方式代替getInitialState 使用 state属性替代,初始化可以写在constructor里,也可以写成类属性 2、下一代 阅读全文
posted @ 2018-09-17 16:17 全玉 阅读(402) 评论(0) 推荐(0) 编辑
摘要:1. Set Set是一个集合,里面的值都是唯一的,没有重复的。Set中可以是任何数据类型,并且添加数据时会进行严格比较,重复数据无法加入。 2. WeakSet 弱引用Set。只能存储对象,不能存储其他类型。且只保持对其中对象的弱引用,若外部无对此对象的引用,或者对象被删除,则WeakSet中将不 阅读全文
posted @ 2018-09-17 15:34 全玉 阅读(288) 评论(0) 推荐(0) 编辑
摘要:1. 基本形式 装饰器在javascript中仅仅可以修饰类和属性,不能修饰函数。装饰器对类的行为的改变,是代表编译时发生的,而不是在运行时。装饰器能在编译阶段运行代码。装饰器是经典的AOP模式的一种实现方式。 2. 装饰器的执行顺序 同一处的多个装饰器是按照洋葱模型,由外到内进入,再由内到外执行 阅读全文
posted @ 2018-09-17 13:42 全玉 阅读(6087) 评论(0) 推荐(0) 编辑
摘要:1. 基本形式 参数说明: obj: 必需,目标对象prop: 必需,需定义或修改属性的名字descriptor: 必需,目标属性所拥有的特性 2. descriptor的基本机构 get,set方法不能与writable或value一起使用 3. configurable详细说明 是否可以删除目标 阅读全文
posted @ 2018-09-17 11:28 全玉 阅读(358) 评论(0) 推荐(0) 编辑
摘要:在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件。 Mixin方法例如: 但是由于Mixin过多会使得组件难以维护,在React ES6中Mixin不再被支持。 高阶组件是一个接替Mixin实现抽象组件公共功能的好方法。高阶组件其实是一个函数,接收一个组件作为参数,返回 阅读全文
posted @ 2018-09-16 20:21 全玉 阅读(18783) 评论(1) 推荐(0) 编辑
摘要:1. 箭头函数基本形式 2. 箭头函数基本特点 (1). 箭头函数this为父作用域的this,不是调用时的this 箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。普通函数的this指向调用它的那个对象。 上例中,init是function,以pers 阅读全文
posted @ 2018-09-16 16:32 全玉 阅读(55537) 评论(3) 推荐(4) 编辑
摘要:1. async函数的基本形式 2. async函数的返回值总是一个Promise 无论async函数有无await操作,其总是返回一个Promise。 1. 没有显式return,相当于return Promise.resolve(undefined);2. return非Promise的数据da 阅读全文
posted @ 2018-09-15 17:18 全玉 阅读(53668) 评论(0) 推荐(1) 编辑
摘要:1. 判断微信 2. 判断Andorid还是ios 3. 判断PC 出处:https://www.cnblogs.com/zhuchenglin/p/7528250.html 阅读全文
posted @ 2018-09-14 18:33 全玉 阅读(320) 评论(0) 推荐(0) 编辑
摘要:1. 键值对 2. 展开属性 其中props是一个对象: 3. setProps方法从外表设置属性 出处:https://www.cnblogs.com/daomul/p/4853637.html 阅读全文
posted @ 2018-09-14 16:30 全玉 阅读(1001) 评论(0) 推荐(0) 编辑
摘要:React中注释有以下三种 var content = ( <Nav> {/* 一般注释, 用 {} 包围 */} <Person /* 多 行 注释 */ name={window.isLoggedIn ? window.name : ''} // 行尾注释 /> </Nav> ); 出处:htt 阅读全文
posted @ 2018-09-14 15:57 全玉 阅读(5432) 评论(0) 推荐(0) 编辑
摘要:1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Deferred对象有resolve()和reject()方法,可以直接随时修改该对象的状态。 比如: va 阅读全文
posted @ 2018-09-14 15:37 全玉 阅读(2944) 评论(0) 推荐(0) 编辑
摘要:1. Promise的状态 Promise对象有三个状态: 1. 进行中(pending) 2. 成功(resolved) 3. 失败(rejected) 2. 生成一个Promise对象 1. 构造函数 new Promise(function(resolve,reject){ }); resol 阅读全文
posted @ 2018-09-14 14:28 全玉 阅读(7251) 评论(0) 推荐(0) 编辑
摘要:this.props用来获取组件从外部传入的属性,但是this.props.children比较特殊,它是由React给添加上的,表示组件的所有子节点。this.props.children可以用来读取子节点,或者渲染子节点。this.props.children所代表的子节点,不仅仅是指一个DOM 阅读全文
posted @ 2018-09-13 19:51 全玉 阅读(6949) 评论(0) 推荐(0) 编辑
摘要:最近做项目调试IE9的兼容性,遇到问题,样式应用不上去,在其他浏览器中是正常的。 经过查找,判定是IE9的css截断问题。 1. IE9截断判定方法 1. 打开IE Developer Tools,在网络面板,进行捕获,抓取到的css文件是完整的2. 打开IE Developer Tools的HTM 阅读全文
posted @ 2018-09-12 20:35 全玉 阅读(732) 评论(0) 推荐(0) 编辑
摘要:1. react的事件是合成事件((Synethic event),不是原生事件 合成事件与原生事件的区别 1. 写法不同,合适事件是驼峰写法,而原生事件是全部小写2. 执行时机不同,合适事件全部委托到document上,而原生事件绑定到DOM元素本身3. 合成事件中可以是任何类型,比如this.h 阅读全文
posted @ 2018-09-12 00:56 全玉 阅读(2676) 评论(0) 推荐(2) 编辑
摘要:1. 安装git 添加git基本配置,参见git config 生成ssh key,参考git ssh key和多账号配置 2. windows系统配置支持linux命令 1. 从云盘上下载linux命令包,将其解压缩后放在C:\WINDOWS目录下 2. 我的电脑上右键--属性--高级环境变量在环 阅读全文
posted @ 2018-09-11 00:10 全玉 阅读(152) 评论(0) 推荐(0) 编辑
摘要:如上代码所示,仅仅在constructor中将props赋值给state,constructor仅在组件创建时执行一次,props发生变化不会执行,因此,render中的value仅显示初始值,不会发生变化 如下,在constructor和componentWillReceiveProps都进行pr 阅读全文
posted @ 2018-09-09 01:48 全玉 阅读(2123) 评论(0) 推荐(0) 编辑
摘要:1. setState基本特点 1. setState是同步执行的 setState是同步执行的,但是state并不一定会同步更新 2. setState在React生命周期和合成事件中批量覆盖执行 在React的生命周期钩子和合成事件中,多次执行setState,会批量执行 具体表现为,多次同步执 阅读全文
posted @ 2018-09-09 01:15 全玉 阅读(17027) 评论(0) 推荐(1) 编辑
摘要:1. setState的改变会触发4个生命周期钩子 shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate 2. props的改变会触发5个生命周期钩子 componentWillReveicePropsshouldCompo 阅读全文
posted @ 2018-09-09 00:22 全玉 阅读(3063) 评论(0) 推荐(1) 编辑
摘要:1.默认状态设置 1.constructor (ES6) 2.getInitialState (ES5) 只能用在React.createClass中,extends React.Component不行 2.默认props设置 1.组件外部 (ES6) 2.组件内部 (ES7,必须开启ES7的bab 阅读全文
posted @ 2018-09-07 12:28 全玉 阅读(1100) 评论(0) 推荐(0) 编辑
摘要:JavaScript的in操作符可以用来判断一个属性是否属于一个对象,也可以用来变量一个对象的属性 1. 判断属性属于对象 2. for in遍历对象属性 3. in可以用来进行判断 4. delete操作符可以删除属性,配合in使用 5. 尽量不要用for in遍历数组 集合遍历的效率为:hash 阅读全文
posted @ 2018-09-07 11:32 全玉 阅读(10061) 评论(0) 推荐(0) 编辑
摘要:受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题。因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态。由用户直接控制的称为非受控组件,而由react的控制的,称为受控组件。 1. 非受控组件 没有设置v 阅读全文
posted @ 2018-09-06 18:04 全玉 阅读(816) 评论(0) 推荐(0) 编辑
摘要:css的命名冲突目前有几种解决方法: 1.命名约定 人为的制定一下命名规则以避免冲突,例如前缀,嵌套等 2.CSS in JS 在JavaScript中写CSS,使用工具编译为css,最常见的是styled-components 3.使用编译工具改变css类名 最常见的是CSS Modules 4. 阅读全文
posted @ 2018-09-03 15:28 全玉 阅读(2402) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示