一,概要
在同系列的上一篇博客React修炼之路(一)里,我第一次接触组件key这个概念,因为不理解key的用处及不清楚React组件的更新机制而遇到父级组件调用了render函数而render内的子组件内容不更新的问题。
在React修炼之路(一)里我在子组件里使用了componentWillReceiveProps方法,实现了内容更新,具体内容参见上一篇博客。
最近又看了一些资料,同时实践得更多,对这个问题有了新的理解,下面简单说说。
二,学习资料
惯例,先上资料:
核心内容: React是根据组件上设定的key属性来生成该组件唯一的标识,只有key改变了,React才会更新组件,否则重用该组件。如果想要更新组件内容,请保证每次的key都不一样。
建议大家先看第二个文档:民间文档:进一步阐述和论证,该文档有例子演示也有相应的解决方法。解决方法的核心还是这句话:如果想要更新组件内容,请保证当前组件的key与上一状态组件的key不同。
三,代码示例
React修炼之路(一)里面实现组件更新的方法就不说了,这里说说上面文档给我的启发。首先要明确自己的业务需求。
你的组件不是动态组件(不需要动态更新),例如你一个列表只做展示,第一次render出来后就不会改变里面的内容,那么你不需要指定key(不指定key时,React也会生成一个默认的标识),或者将index作为key,只要key不重复即可。
你的组件是动态组件(需要动态更新),例如你一个列表做展示时,能向列表添加或删除元素