react性能优化
Virtual Dom(下称vd)算是React的一个重大的特色,因为Facebook宣称由于vd的帮助,React能够达到很好的性能。是的,Facebook说的没错,但只说了一半,它说漏的一半是:“除非你能正确的采用一系列优化手段”。
一、关于key值得使用
react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。
1.key的值要稳定唯一
请使用后台返回的id去写,这样每个值有对应的key
注意不要使用Math.Random()或者new Date()去写,这样每次都会销毁重新加载组件的
2.index作为key是一种反模式
不要使用index作为key
不过key值的唯一是有范围的,即在数组生成的同级同类型的组件上要保持唯一,而不是所有组件的key都要保持唯一
二、关于数组和对象的深拷贝
浅拷贝,就是两个变量都是指向一个地址,改变了一个变量,那另一个变量也随之改变。这就是浅拷贝带来的副作用,两个变量会相互影响到,因为它们指向同一个地址。
深拷贝,就是互相独立,指向的是不同的地址,一个变量改变了,另一个变量不会被影响到。
react角度:父组件传给子组件的attr,在子组件通过props.attr直接复制给childAttr,这就是浅拷贝,父组件的attr与子组件的childAttr指向同一个地址,在子组件中改变childAttr,那么父组件中的attr也会随之改变。这时再将attr传入这个子组件,attr的值就是被改变之后的值。所以要想数据源头attr不会被改变,这时就需要在父组件中深拷贝attr,然后再一一传入子组件;或者在子组件中将props.attr深拷贝给childAttr。
两种方法能解决数组和对象的问题
1.比较好用和简单的方法是是
转成 JSON 再转回来
var obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.body.a = 20;
console.log(obj1);
// { body: { a: 10 } } <-- 沒被改到
console.log(obj2);
// { body: { a: 20 } }
console.log(obj1 === obj2);
// false
console.log(obj1.body === obj2.body);
// false
但是有一个缺陷,会抛弃对象的构造函数,还有就是正则表达式无法使用
于是有了第二种常用的方法
2.递归拷贝,也就是把对象里面的属性一层一层拷贝,直到他的类型不是对象
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
var prop = initalObj[i]; // 避免相互引用对象导致死循环,如initalObj.a = initalObj的情况
if(prop === obj) {
continue;
}
if (typeof prop === 'object') {
obj[i] = (prop.constructor === Array) ? [] : {};
arguments.callee(prop, obj[i]);
} else {
obj[i] = prop;
}
}
return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
console.log(str.a);
三、关于页面组件化
影响网站的速度是用户的网速和网站对http请求的处理,为了提升这一点我们通常都会减少http请求,比如,js和css的合并压缩、雪碧图等等。
影响网站性能最大的因素就是浏览器的重绘和重排版了,在原生js当中,我们在遇到需要操作添加DOM的时候,一般都会使用创建文档碎片(document.createDocumentFragment)的方式来减少DOM的重绘和重排版。
所以应该把组件的粒度变小,因为react一个props或者state改变,同时会刷新本组件以及他的所有父辈组件,但如果你把每个组件优化到最小,把能分离出去的分离出去,那么组件渲染的能力就会提高很多
比如说
image.png
左侧有两个菜单,菜单的内容在右侧显示
那么把两个菜单的内容分别写在两个组件里面,调用的时候在显示,这样子会增强渲染能力
四、render使用哪种函数书写方式性能高
image.png第一种是在构造函数中绑定this,第二种是在render()函数里面绑定this,第三种就是使用箭头函数,都能实现上述方法;
但是哪一种方法的性能最好,是我们要考虑的问题。应该大家都知道答案:第一种的性能最好。
因为第一种,构造函数每一次渲染的时候只会执行一遍;
而第二种方法,在每次render()的时候都会重新执行一遍函数;
第三种方法的话,每一次render()的时候,都会生成一个新的箭头函数,即使两个箭头函数的内容是一样的。
我们推荐的方法是在constructor里面声明这个函数
比如上面的
this.handleClick=this.handleClick.bind(this)
五、在render里面少创建对象
首先我们要明白判断1==1,结果肯定是true,但是{name:"Lisa"}=={name:"Lisa"}的话false,
六、js比较对象和数组
因为有些特殊情况比如[]==[]为false,
所以我们使用JSON.stringify把数组或者对象进行包裹在进行比较