美文网首页
react 我所踩过的坑

react 我所踩过的坑

作者: 二师兄没啦 | 来源:发表于2018-06-08 10:17 被阅读0次

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

    未修改前的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的了解和理解太少。

    官方规范

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

    相关文章

      网友评论

          本文标题:react 我所踩过的坑

          本文链接:https://www.haomeiwen.com/subject/rwjosftx.html