未遵守 react 最佳实践而引发的 Bug

发表于 | 阅读次数: | 本文总阅读量 次

这两天遇到一个 bug，简单描述就是，在一个帖子回复列表页面，当帖子回复特别多的时候，在本页面打开回复弹窗会特别的卡，就是下图中的这样一个弹窗。

回复列表1.png

打开回复弹窗：

回复列表2.png

背景描述：列表用的是 FlatList 组件，弹窗用的的 Modal。

经过排查发现，每次打开 Modal ，回复列表都会重新 render 一遍。在回复数量少的情况下，没有出现很卡顿的情况。但是在回复数量多的情况下（大约大于80），打开回复弹窗就会特别的卡。因为重新 render 整个回复列表真的很耗费性能。

主要原因就是，在写 react 代码的时候，没有很好的遵循 react 的最佳实践写法，导致很多无谓的 render，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
<PostReplyList
  navigation={navigation}
  onReloadFunc={this.refreshPage}
  ListHeaderComponent={this.renderFlatListHeader()}
  getCommentDetailInfo={this.openReplyModal}
  flatListGetDataFunc={func => this.flatListGetDataFuncHandle(func)}
/>
// good
<PostReplyList
  navigation={navigation}
  onReloadFunc={this.refreshPage}
  ListHeaderComponent={this.renderFlatListHeader()}
  getCommentDetailInfo={this.openReplyModal}
  flatListGetDataFunc={this.flatListGetDataFuncHandle}
/>

上面的主要修改点在于：不要在 render 方法中写箭头函数，因为如果这样写的话，会导致每次 render 都重新生成一个新的方法，然后导致组件重新 render，造成不必要的性能问题。

感悟：其实关于 react 的最佳实践之前也看过很多次，理论都懂，但是没想到这次造成这么大的性能问题，以后会更加严谨的对待最佳实践，尽量少的造成性能浪费问题。

关于 react 最佳实践的只是都能 google 的到，这里就不一一列出来了，以此文来记录这个很蠢的 bug。

支持原创