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把数组或者对象进行包裹在进行比较
网友评论