jsperf
jsfiddle
JSBench
JavaScript
代码片段的执行速度。 通过简单而简短的 URL
与他人在线共享和协作。测试条件 | Chrome版本94.0.4606.81 | Firefox版本93.0 (64 位) |
---|---|---|
Object.assign对象合并 | 14.07080078125 ms | 12.11 ms |
展开运算符对象合并 | 18201.126953125 ms | 7424.69 ms |
展开运算符数组加单个 | 42.848876953125 ms | 877.14 ms |
push方法数组加单个 | 0.489013671875 ms | 0.89 ms |
concat方法数组加单个 | 0.6640625 ms | 2.40 ms |
展开运算符两个大数组合并 | 38.1337890625 ms | 43.64 ms |
concat方法两个大数组合并 | 4.3740234375 ms | 31.28 ms |
在循环比较多或者操作的数组长度比较大的情况下:
Object.assign
多数情况下性能比 展开运算符(...)
的性能高connat、push
性能比 展开运算符(...)
的性能高在 Chrome版本94.0.4606.81
、 Firefox版本93.0 (64 位)
的浏览器下
Object.assign、connat
的性能会比 展开运算符“...”
的性能高Object.assign
会触发 Proxy/Object.definedProperty
的 set
方法,展开运算符“...”
不会触发Object.assign
和 展开运算符
都是浅拷贝展开运算符放在前面的性能比放在后面的性能高
function (a, ...b) {}
)的时候,有自己的使用方式展开运算符“...”
比 Object.assign
性能高getBoundingClientRect 返回的是一个 DOMRect 对象,是一组矩形集合,我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。
使用方法如下:
let domToTop = dom.getBoundingClientRect().top // dom 的顶边到视口顶部的距离
let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离
let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离
let domToRight = dom.getBoundingClientRect().right // dom 的右边到视口左边的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 110%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
}
.content {
width: 20%;
css visible
属性(display还是content-visibility ? )来控制需要保存状态组件的渲染,而不是使用 if/else
,避免React将其卸载。React-Router
二次开发。React-Router
在路由切换时默认卸载非活动组件,因此这些库通过重写 React-Router
中的部分功能或者将其拓展的方式使得在路由切换时相关组件不被直接卸载,而是缓存下来。这种实现方式决定了状态保存的粒度只能具体到SPA的页面级别。strict mode
的回复中提到了其正在开发的 <Offscreen>
组件,并且预计其在 react@18.X
(非18早期版本)中可能会出现,其功能与vue <keep-alive>
类似。react-router-cache-route
。react-activation
。此外umi中使用 react-activation
可以直接使用其封装插件 umi-plugin-keep-alive
。如:
// a.tsx
// 箭头函数添加泛型报错(Error: JSX element ‘T’ has no corresponding closing tag.ts(17008))
const foo = <T>(props: T)=> void
原因: 因为泛型的语法与 JSX 的语法冲突,导致 TS 解析成 JSX 而产生 unexpected token 的问题
解决:
1. 不要写在 .tsx 文件里面就不会报错
2. 在后面加一个逗号就能正确解析了
3.
const foo = <T,>(props: T)=> void
React.ComponentProps<typeof Button>
ConstructorParameters :类构造函数参数类型的元组
Exclude:将一个类型从另一个类型排除
Extract:选择可分配给另一类型的子类型
InstanceType:从一个新类构造函数中获得的实例类型
NonNullable:从类型中排除空和未定义
Parameters:函数的形参类型的元组
Partial:使对象中的所有属性都是可选的
Readonly:将对象中的所有属性设置为只读
ReadonlyArray:创建给定类型的不可变数组
Pick:对象类型的一种子类型,包含其键的子集
Record:从键类型到值类型的映射
Required:使对象中的所有属性都是必需的
ReturnType:函数的返回类型
当我们将某个变量定义为 any
类型后,TypeScript
将会跳过对这个变量的类型检查
TypeScript
在3.0版本引入了 unknown
类型,它可以理解为类型安全的 (type-safe)any
unknown
类型的对象unknown
类型的对象不可以直接赋值给其它非 unknown
或 any
类型的对象,并且不可以访问上面的任何属性never
就是 TypeScript
的底部类型
never
类型只接受 never
类型的对象, any
也不接受never
会从联合类型中移除,类似于将零和其他数字相加时结果等于该数字。即 type Res = never | string // string
never
会覆盖交叉类型中的其他类型,类似于零乘其他数字时结果等于零。即 type Res = never & string // never
void
其实可以理解为 null
和 undefined
的联合类型,它表示空值