Taro官网 写法最佳实践

Taro官网 写法最佳实践

删除楼层节点

<View>
  <!-- 轮播 -->
  <Slider />
  <!-- 商品组 -->
  <Goods />
  <!-- 模态弹窗 -->
  {isShowModal && <Modal />}
</View>

导致组件渲染有两种情况

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

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

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

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

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

<View>
  <!-- 轮播 -->
  <Slider />
  <!-- 商品组 -->
  <Goods />
  <!-- 模态弹窗 -->
  <View>
    {isShowModal && <Modal />}
  </View>
</View>

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

<Map
  latitude={22.53332}
  longitude={113.93041}
  markers={[{
    latitude: 22.53332,
    longitude: 113.93041
  }]}
/>

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

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

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

解决方法：使用状态保存

<Map
  latitude={22.53332}
  longitude={113.93041}
  markers={this.state.markers}
/>