react 我所踩过的坑

ToDoList是我学习react的开始,对于列表组件,我进行的组件封装是这样的层次: TodoitemList——>TodoLi——>TodoItem


react 我所踩过的坑_第1张图片
未修改前的key放在li上

这些组件外层包裹的是rudux和react-dnd封装,方便做数据管理和拖拽功能。

在demo演示的时候,导师指出的第一个问题就是组件化思想,对组件的封装有问题。我的理解是todoli分装好了之后,再在li下面封装一个todoitem完全没有必要,因为li现在的存在作用仅仅是一个数据转存,没有任何存在的必要性,完全可以合并todoli和todoitem做为一个组件。

第二个问题是render,用数组返回的li元素,设置好key了,做了shouldComponentUpdate判断,如果元素内容没有变化,就不要销毁重新建立,而是再次使用,这样可以减少大量的性能消耗。但是仍旧遇到问题,就是删除一个元素后,排列再之后的li都会再次render,should生命周期内判断返回的是true,而且willunmounted每次销毁的都是最后一个元素而不是点击删除的对应元素。

正常的逻辑是key和shuold都写好了,不应该出现未修改的元素也会render,不符合diff算法。最终在官网上看到该问题的产生的原因,也只能感叹对react的了解和理解太少。


react 我所踩过的坑_第2张图片
官方规范

将key提取到todoli上,发现果然不再render未修改的元素,保证了性能


react 我所踩过的坑_第3张图片

你可能感兴趣的:(react 我所踩过的坑)