天天看点

React性能优化的一些技巧

之前做react的子节点遍历经常有一种做法,

let list=list.map((item,index)=>{
	return {
		<div key={index}>{item.name}</div>
	}
})
           

经常很随意的用数组下标作为key的值,很多时候你不会发现这样子做有什么问题(其实也有性能上的问题),直到你的列表有input之类的输入框,你会动态的增删输入框的数据,这个时候你才发现了很严重的问题,你的列表数据似乎乱套。

然后去网上看资料才明白react关于diff算法的一些规则,其中一点关于子节点遍历,说到key就是react用来识别dom的身份的唯一标示,现在的官网也有说这一点,可以去看看。

当然还有一点是官网没有说的到的,那就是修改列表数据的时候,可能会导致其他列表也会触发render,这里简单解释下,就是引用对象复制的原因,一般修改某个列表会复制这个数据,然后再修改它,然后再用setState方法去覆盖,这个时候对象肯定变了,引用地址也变了,那么其他列表也会触发render渲染。这个时候要么你手写shouldcomponentupdate方法,去做深度判断,要么就采用immutable.js。我个人推荐immutable,避免去手写生命周期逻辑,因为你的列表可能无处不在。

immutable单词就是不可变,永恒的,起初我很费解这个单词的意思,麻痹的不可变对象,那为什么又提供了修改方法呢?哦,原来修改的对象都是和原来的对象引用地址不同的,感觉像是深度拷贝,既然深度拷贝了,那和你想说的避免触发render有什么关系?原来他们的并不是完全深度拷贝,只会对目标节点,和节点的父级,祖父级以此类推,进行深度拷贝,兄弟节点,和目标节点的子节点并不会修改,所以性能上有所提升,并且可以避免其他列表触发render操作

immutable视频链接

React性能优化的一些技巧
React性能优化的一些技巧