ES6之对象的扩展

1. 属性的简洁表示法 ES6允许直接写入变量和函数作为对象的属性和方法。意思就是说允许在对象中只写属性名,不用写属性值。这时,属性值等于属性名称所代表的变量。下面分别举一个例子来说明: ...

January 5, 2018 · 2 min · 312 words · 桃翁

一个例子来谈react的两大优势

今天我想谈的react的优势有两点: 声明式写法更符合人性 减少dom操作使性能得以提升 现在我们就写一个最简单的计数例子来比较传统的jquery和react。 ...

January 5, 2018 · 1 min · 117 words · 桃翁

4个你从未听说过的强大的 JavaScript 运算符

你有没有花一个下午的时间浏览过 Mozilla 文档?如果你有,你会很清楚网上有很多关于 JavaScript 的信息。这使得人们很容易忽略一些不同寻常的 JavaScript 操作符。 然而,仅仅因为这些操作符不常见并不意味着它们不强大!它们在语法上看起来都很相似,但是当它们以不同的方式工作时,请务必阅读它们。 让我们开始吧! 译者注:nullish 代表 null 或者 undefined 1. ?? 操作符 在 JavaScript 中,?? 操作符被称为nullish 合并操作符。如果第一个参数不是 null/undefined,这个运算符将返回第一个参数,否则,它将返回第二个参数。让我们看一个例子。 null ?? 5 // => 5 3 ?? 5 // => 3 当为一个变量分配默认值时,JavaScript 开发人员传统上依赖于逻辑 OR 操作符,如下所示。 var prevMoney = 1 var currMoney = 0 var noAccount = null var futureMoney = -1 function moneyAmount(money) { return money || `You currently do not own an account in the bank` } console....

3 min · 552 words · 桃翁

Deep In React 之浅谈 React Fiber 架构(一)

文章首发于个人博客 前言 2016 年都已经透露出来的概念,这都 9102 年了,我才开始写 Fiber 的文章,表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了,在写文章的时候参考资料比较多,比较容易深刻的理解。 React 作为我最喜欢的框架,没有之一,我愿意花很多时间来好好的学习他,我发现对于学习一门框架会有四种感受,刚开始没使用过,可能有一种很神奇的感觉;然后接触了,遇到了不熟悉的语法,感觉这是什么垃圾东西,这不是反人类么;然后当你熟悉了之后,真香,设计得挺好的,这个时候它已经改变了你编程的思维方式了;再到后来,看过他的源码,理解他的设计之后,设计得确实好,感觉自己也能写一个的样子。 所以我今年(对,没错,就是一年)就是想完全的学透 React,所以开了一个 Deep In React 的系列,把一些新手在使用 API 的时候不知道为什么的点,以及一些为什么有些东西要这么设计写出来,与大家共同探讨 React 的奥秘。 我的思路是自上而下的介绍,先理解整体的 Fiber 架构,然后再细挖每一个点,所以这篇文章主要是谈 Fiber 架构的。 介绍 在详细介绍 Fiber 之前,先了解一下 Fiber 是什么,以及为什么 React 团队要话两年时间重构协调算法。 React 的核心思想 内存中维护一颗虚拟DOM树,数据变化时(setState),自动更新虚拟 DOM,得到一颗新树,然后 Diff 新老虚拟 DOM 树,找到有变化的部分,得到一个 Change(Patch),将这个 Patch 加入队列,最终批量更新这些 Patch 到 DOM 中。 React 16 之前的不足 首先我们了解一下 React 的工作过程,当我们通过render() 和 setState() 进行组件渲染和更新的时候,React 主要有两个阶段: 调和阶段(Reconciler):官方解释。React 会自顶向下通过递归,遍历新数据生成新的 Virtual DOM,然后通过 Diff 算法,找到需要变更的元素(Patch),放到更新队列里面去。 渲染阶段(Renderer):遍历更新队列,通过调用宿主环境的API,实际更新渲染对应元素。宿主环境,比如 DOM、Native、WebGL 等。...

3 min · 618 words · 桃翁

三个比它们等效 ES5 速度慢的 ES 6 函数

[Meting] [Music server=“tencent” id=“000AwJtd3Wp27b” type=“song”/] [/Meting] 我在 medium 上看到一篇 3 JavaScript Performance Mistakes You Should Stop Doing 文章(点击阅读全文可以查看原文,需要科学上网),大概意思就是说有 3 个 JavaScript 性能错误,你不应该再去写了。很多“歪果仁”也是一看到这个标题就开始**“喷”**作者了,下文会详细说。我先介绍下这篇文章的主要内容 文章主要内容: 当 ES5 发布的时候,JavaScript 引入了很多新的数组函数。其中包括 forEach,reduce,map,filter - 它们让我们感觉语言在不断增长,功能越来越强大,编写代码变得更加有趣和流畅,结果更易于阅读和理解。 大约在同一时间,一个新的环境–Node.js,它使我们能够从前端到后端平稳过渡,同时真正重新定义完整的全栈开发。 所以作者就测试了一下新提供的这些方法是否会影响我们程序的性能。他在 macOS 上对Node.js v10.11.0 和 Chrome 浏览器执行了以下测试。 1. 循环数组 他想到的第一次很常见的场景,就是计算一下 10k 项的总和。然后比较了使用 for,for of,while,forEach 和 reduce 的随机 10k 项的总和。运行测试 10,000 次返回以下结果: For Loop, average loop time: ~10 microseconds For-Of, average loop time: ~110 microseconds ForEach, average loop time: ~77 microseconds While, average loop time: ~11 microseconds Reduce, average loop time: ~113 microseconds 在谷歌搜索如何对数组求和时,reduce 是最好的解决方案,但它是最慢的。即使是最新的(ES6)也提供了较差的性能。事实证明,老的 for 循环提供了迄今为止最好的性能 - 超过 10 倍以上!...

2 min · 353 words · 桃翁