在日常开发，经常会有要求异步函数的执行结果按顺序执行，看下面的例子： let asyncF = (i, callback) => {2// 随机延迟若干事件触发回调 let lateTime = Math.random() * 10; setTimeout(() => {callback(i)}, lateTime);}for (var i = 0; i < 5; i ++) { asyncF(i, console.log); // 结果完全是随机的，一个可能的结果是0，1，4，3，2} 这个例子模拟了一系列…
概述如果你经常使用 PureComponent 或 shouldComponentUpdate 进行性能优化的时候，那么一定对纯函数组件（SFC 组件）缺失这样的功能而感觉不爽，甚至有时候不得不对有些复杂的组件进行一层包装，包装成类组件。 现在，React 官方终于提供了对这个功能的支持。在 React v16.6.0 新引入了一个高阶组件 React.momo，它的作用类似于 React.PureComponent 但是是作用在纯函数组件（SFC 组件）上的。 const MyComponent = React.memo(function MyComponent(props) { …
之前在实现代码行号的时候发现 CSS 有个很方便的功能“计数器”，可以很方便的生成代码行号以及章节号，本文介绍一些这些功能。 css 计数器有三部分组成： counter-reset、counter-increment 两个属性和函数 counter()/counters()。下面介绍一下它们的使用。 counter-reset使用计数器前需要使用 counter-reset 声明一个或多个计数器： counter-reset: counter-name [initValue] [counter-name2 [initValue2]] …[counter-nameN [initValueN]…
翻译自 React Docs: Render Props The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. 术语 “render prop” 指的是使用其值为函数的 prop 在 React 组件之间共享代码的技术。 A component with a render prop takes a function that returns a React element and calls i…
翻译自： React Docs: You Probably Don’t Need Derived State React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work proper…
过去，组件内部的 JavaScript 错误经常会破坏 React 的内部状态，并导致它在下一次渲染时发生奇奇怪怪的错误。这些错误通常总是由应用程序代码中的早期错误引起，但在之前版本的 React 没有提供在组件中优雅地处理它们的方法。 针对“部分 UI 的错误不应当导致整个应用的崩溃” 这个理念，React16 引入了一个新的概念 “Error Boundaries（ 错误边界）”。Error Boundaries 是一个特殊的 React 组件， 它用来捕获发生在子组件树的 js 错误，并输出这些错误，显示一个回调的 UI，避免一个组件的一个错误导致整个组件树的崩溃。 在学习它之前，我们先…
我们知道，浏览器在解析文档的时候如果遇到引入的外部资源，需要下载外部资源，如果有些外部资源比较大，可能会需要一个较长的下载时间，而资源预加载技术就是为了部分解决这样的问题的。 资源预加载顾名思义，就是预测将来可能需要的一些资源，并在当前对这些资源进行预先加载的技术。 很明显，资源预加载对优化当前页面的加载速度并没有什么用处，但是却可以优化用户进行下一次跳转的加载速度。资源预加载主要是通过 link 标签提供的几个不同的 rel 的属性值，进行不同程度的预加载，主要由以下几种不同的策略：dns-prefetch、preconnect、prefetch、preload、prerender。 DNS…
我们知道，html 在解析过程中，如果遇到外部的脚本，会暂停当前页面的解析过程，而是去下载这个引入的外部脚本，然后执行这个外部脚本，这样无疑会导致当前的页面的渲染被阻塞，这也是为什么建议将脚本文件的加载放在文档的最后。 script 标签新增加了两个布尔属性 defer 和 async 用于控制脚本的加载和解析，这两个属性的目的都是为了保证引入的外部的脚本不会阻塞当前页面的渲染过程。 <script async src="script.js"></script><script defer src="script.js">…
字符串的重复，追加补全也是常用的操作， ES 的新标准也为字符串添加了几个支持这样操作的函数，提供了操作的方便，之前一直没注意到这几个方法，这里做一个补充。 repeat将源字符串重复多次后返回 string.repeat(count); count 指定字符串重复次数，重复次数不能小于0，如果是小数，会先取整数部分处理。 如果重复次数为小于等于-1的负数（-0.? 会先被取整数部分处理，所以不会报错）或者为 infinity 或者超过字符串的最大长度会抛出 [RangeError](https://developer.mozilla.org/zh-CN/docs/Web/JavaSc…
JS 中的 this 是一个很容易让人迷糊的概念，本文主要总结了各种情况下的 this 指向。 全局环境中的 this全局环境中的 this 总是指向全局对象 window 上的。 this.a1 = 10;var a2 = 20;console.log(a1); // 10console.log(this.a2); // 20 非箭头函数中的this需要记住一点：在一个函数上下文中，函数中的 this 始终是由函数的调用者提供，若不存在调用者，则非严格模式下 this 指向全局顶级对象（浏览器中为 window 对象），而严格模式下 this 为 undefined。接下来看几个例子： v…