Taro官网 写法最佳实践

删除楼层节点

  
  
  
  
  
  {isShowModal && }

1
2
3
4
5
6
7
8

导致组件渲染有两种情况

1. 父组件的状态修改
2. 该组件的状态修改

此处的代码因为isShowModal的状态，属于修改父组件的状态。

当 isShowModal 由 true 变为 false 时，模态弹窗会从消失。此时 Modal 组件的兄弟节点都会被更新，setData 的数据是 Slider + Goods 组件的 DOM 节点信息。

一般情况下，影响不会太大，开发者无须由此产生心智负担。但倘若待删除节点的兄弟节点的 DOM 结构非常复杂，如一个个楼层组件，删除操作的副作用会导致 setData 数据量较大，从而影响性能。

解决方法：对更新组件进行包裹

  
  
  
  
  
  
    {isShowModal && }
  

1
2
3
4
5
6
7
8
9
10

基础组件的属性要保持引用

1
2
3
4
5
6
7
8

以上代码的markers属性所需传入一个数组，每次渲染时，React 会对基础组件的属性做浅对比，这时发现 markers 的引用不同，就会去更新组件属性。最后导致 setData 次数增多、setData 数据量增大。
浅比较和深比较的区别

• 浅比较，比较的是两个引用类型是否引用的是同一个
• 深比较，比较两个类型的值是否相等

每次传入的markers都是一个新的地址，引用不相同导致的重复渲染

解决方法：使用状态保存

1
2
3
4
5