首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
LeviDing
掘友等级
前端工程师
微信公众号「技术漫谈」。现代 JavaScript 教程中国负责人 https://zh.javascript.info
获得徽章 12
动态
文章
专栏
沸点
课程
收藏集
关注
赞
1.2K
文章 955
沸点 199
赞
1.2K
返回
|
搜索文章
LeviDing
前端工程师
·
3年前
举报
#知识点记录# Object.is 方法
有一个特殊的内建方法 Object.is,它类似于 === 一样对值进行比较,但它对于两种边缘情况更可靠:
1. 它适用于 NaN:Object.is(NaN,NaN)=== true,这是件好事。
2. 值 0 和 -0 是不同的:Object.is(0,-0)=== false,从技术上讲这是对的,因为在内部,数字的符号位可能会不同,即使其他所有位均为零。
3. 在所有其他情况下,Object.is(a,b) 与 a === b 相同。
这种比较方式经常被用在 JavaScript 规范中。当内部算法需要比较两个值是否完全相同时,它使用 Object.is(内部称为 SameValue)。
展开
数字类型
zh.javascript.info
今天学到了
分享
评论
点赞
LeviDing
前端工程师
·
3年前
举报
#知识点记录# 记录一个 <a> 标签中使用 target="_blank" 之后出现的关于 rel='noopener noreferrer' 的安全问题。
rel='noopener noreferrer' 知多少
juejin.im
今天学到了
赞过
分享
评论
1
LeviDing
前端工程师
·
3年前
举报
#知识点记录# 有人说 React Hooks 会取代 Redux,我不这么认为。我认为 React Hook 只是提供了一个新的让你能够更好地组织代码和沉淀可复用逻辑的一种方式。如果你在写 class 组件的时候决定使用了 Redux,那么 Hooks 可能会使你能够写出更高内聚的组件。React Hooks 并不会取代 Redux,因为他们所解决的并不是同一个问题。
相反,如果我们觉得 Hooks 的出现,使我们能抛弃 Redux,那你可能本就不需要 Redux。不同的工具仅是工具而已,不要为了追求新技术而不考虑实际场景和需求。例如,在使用 Redux 之前,我们应该问问自己“我们需要哪种方式管理状态?Redux 在我这个项目上是否合适,是否大材小用?是否该用 Hooks,还是继续使用类组件?如果我使用 Redux 和 React Hooks(或者 MobX 及其他),我该怎么利用好这些技术的优势进而实现 1+1 > 2 的效果。”
几篇好文章:
1. Clean Up Redux Code with React-Redux Hooks:
medium.com
2. Stop Asking if React Hooks Replace Redux:
medium.com
3. 别再问 React Hooks 能否代替 Redux 了:
www.mengfansheng.com
4. React-Redux Hooks:
react-redux.js.org
5. You Might Not Need Redux:
medium.com
展开
今天学到了
赞过
分享
评论
1
LeviDing
前端工程师
·
3年前
举报
#知识点记录# 函数声明和函数的词法环境
1. 一个函数其实也是一个值,就像变量一样。不同之处在于函数声明的初始化会被立即完成。当创建了一个词法环境(Lexical Environment)时,函数声明会立即变为即用型函数(不像 let 那样直到声明处才可用)。这就是为什么我们可以在(函数声明)的定义之前调用函数声明。
2. 在一个函数运行时,在调用刚开始时,会自动创建一个新的词法环境以存储这个调用的局部变量和参数。
3. 这里注意:函数的词法环境是在该函数被调用时,该函数执行之初才创建的,里面存储的是这个函数调用中的局部变量和参数。
本知识点是 JavaScript 闭包问题的深入理解。
展开
闭包
zh.javascript.info
今天学到了
分享
评论
点赞
LeviDing
前端工程师
·
3年前
举报
#知识点记录# React 中的 setState 同步异步的总结:
1. setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的。
2. setState 的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后的值,形式了所谓的“异步”,当然可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。
3. setState 的批量更新优化也是建立在“异步”(合成事件、钩子函数)之上的,在原生事件和 setTimeout 中不会批量更新,在“异步”中如果对同一个值进行多次 setState ,setState 的批量更新策略会对其进行覆盖,取最后一次的执行,如果是同时 setState 多个不同的值,在更新时会对其进行合并批量更新。
展开
你真的理解setState吗?
juejin.im
今天学到了
等人赞过
分享
2
5
LeviDing
前端工程师
·
3年前
举报
一文讲透执行上下文,执行栈,词法环境和变量环境,强烈推荐
[译] 理解 JavaScript 中的执行上下文和执行栈
juejin.im
好文推荐
分享
评论
点赞
LeviDing
前端工程师
·
3年前
举报
#知识点记录# state 和 props 有什么区别?
props(“properties” 的缩写)和 state 都是普通的 JavaScript 对象。它们都是用来保存信息的,这些信息可以控制组件的渲染输出,而它们的几个重要的不同点就是:
props 是传递给组件的(类似于函数的形参),而 state 是在组件内被组件自己管理的(类似于在一个函数内声明的变量)。
props 是不可修改的,所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 由于 props 是传入的,并且它们不能更改,因此我们可以将任何仅使用 props 的 React 组件视为 pureComponent,也就是说,在相同的输入下,它将始终呈现相同的输出。
state 是在组件中创建的,一般在 constructor 中初始化 state。state 是多变的、可以修改,一般通过 setState 被修改,并且一般是异步更新的。
展开
等人赞过
分享
1
4
LeviDing
前端工程师
·
3年前
举报
#知识点记录# 在 JavaScript 中,undefined 其实是一个变量,这个变量只有一个值就是 undefined。对 null 和 undefined 进行普通相等性检查会得到 true,而进行严格相等检查才会得到 false。在 ECMAScript 中,undefined 并不是一个保留字段,我们可以将 undefined 作为一个局部变量使用,就像局部作用域中任何其他普通变量一样,没有任何特殊性,我们可以为其赋予任何类型的值。
```js
(function() {
var undefined = 'not is undefined';
console.log(undefined); //"not is undefined"
console.log(typeof undefined) // "string"
})()
```
这时我们可以看到,我们所理解的 undefined 的类型和值都被改变了,这在正常开发中容易导致难以查出的 bug。
那么我们怎样做才能确保万无一失呢?在 ECMAScript 规范中有一个叫 void 的运算符:
The void operator evaluates the given expression and then returns undefined.
void 运算符 对给定的表达式进行求值,然后返回 undefined。
也就是说,void 会对其后面的表达式求值,无论结果是多少,都会返回原始值 undefined。因此我们可以用 void 0 来代替 undefined 进行判断,因为 void 0 始终返回的都是原始值 undefined。
```js
let data;
console.log(data === void 0); //true
```
展开
今天学到了
分享
8
点赞
LeviDing
前端工程师
·
3年前
举报
#知识点记录# 今天看了 React.PureComponent 的源码,理解了一下浅比较和深比较。PureComponent 是对 shouldComponentUpdate 的浅比较实现,为什么是浅比较?这就是在性能和效果上做的取舍。
对象浅比较就是比较引用,引用相同,则为 true。深比较是比较值,即使是两个引用不同的对象,他们的值也会被一个一个拿出来进行比较。
在 React 中,在状态也就是 state 发生变化时,会对虚拟 DOM 进行 diff,然后重建对应节点。React 中始终贯穿数据不可变的思想,进行 diff 的时候,拿的是两个数据进行比对,它们的 reference 是不同的。如果进行深比较,会把对应的值拿出来,一一比对值。
而对于浅比较,在源码实现中是用的 Object.is(),这个方法只适用于比较基本类型,而对于对象这种引用类型,如果对象的引用不同就为 false。而 React 里面虚拟 DOM 的 diff,数据的引用就是不同的。所以 PureComponent 进行浅比较,state 里面的对象的变化它比较不出来,也就不会阻止 render。管他什么几层嵌套对象,只要是对象就比较不出来。因为引用不同。
所以 PureComponent ,只能比较出 state、props 里基本数据类型的变化,对象的变化比不出来,也就无法阻止对应的 render。所以,在实际开发中,使用 PureComponent,要注意对应组件里的 state 的数据结构是什么样的,否则达不到通过 PureComponent 进行性能优化的目的。
鄙人拙见,如有纰漏,烦请指出,十分感谢!
展开
今天学到了
等人赞过
分享
8
8
LeviDing
前端工程师
·
3年前
举报
#知识点记录# __proto__ 是 [[Prototype]] 的因历史原因而留下来的 getter/setter。
请注意,__proto__ 与 [[Prototype]] 不一样。__proto__ 是 [[Prototype]] 的 getter/setter。属性 [[Prototype]] 是内部的而且是隐藏的,但是有很多设置它的方式,其中之一就是使用特殊的名字 __proto__。
__proto__ 的存在是历史的原因。在现代编程语言中,将其替换为函数 Object.getPrototypeOf/Object.setPrototypeOf 也能 get/set 原型。
并且呢,在现代编程中不推荐再使用 __proto__ 了,而应该使用现代方法进行替代,具体有哪些现代方法请见:
zh.javascript.info
展开
原型方法
zh.javascript.info
今天学到了
赞过
分享
评论
1
下一页
个人成就
优秀创作者
文章被点赞
11,821
文章被阅读
754,344
掘力值
29,042
关注了
504
关注者
15,648
收藏集
18
关注标签
41
加入于
2017-02-06