ReactJS修炼之路(二):组件的key
核心内容: React是根据组件上设定的key属性来生成该组件唯一的标识,只有key改变了,React才会更新组件,否则重用该组件。如果想要更新组件内容,请保证每次的key都不一样。
React修炼之路(一)里面实现组件更新的方法就不说了,这里说说上面文档给我的启发。首先要明确自己的业务需求。
-
你的组件不是动态组件(不需要动态更新),例如你一个列表只做展示,第一次render出来后就不会改变里面的内容,那么你不需要指定key(不指定key时,React也会生成一个默认的标识),或者将index作为key,只要key不重复即可。
-
你的组件是动态组件(需要动态更新),例如你一个列表做展示时,能向列表添加或删除元素,此时组件是需要刷新的,刷新的依据就是key,对于相同的key,React会采取和上一次刷新同样的方式。这个时候,如果你采取index作为key,那么假设你在列表顶部添加了元素,那么新的元素的key就是index=0,和上一次刷新时旧顶部元素的key相同,此时React将认为这是这个新元素就是就顶部元素,所以就按照顶部元素的内容刷新该元素,导致新元素的内容就是以前的内容,这个和我的预期不一致,我们预期是顶部元素显示新的内容。键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识:
- 虚拟的dom也就是在内存中存在两个不同的obj去比较,比较两个对象的一些属性的这个过程,就是虚拟dom,不同的话就更新。