React Native中重型API调用致应用卡顿的解决方案咨询

嘿，我看你这个问题主要出在两个核心点上：一是在forEach循环里频繁调用setState触发多次重渲染，二是大量数据一次性处理阻塞了JS线程。结合你必须保留全量数据的需求，给你几个针对性的优化方案：

1. 停止频繁调用setState，一次性更新状态 #

你当前的代码在遍历每一条交易数据时都调用setState，这会触发数十甚至数百次组件重渲染，这是卡顿的头号元凶。应该先把所有数据整理完成，再一次性更新状态：

componentDidMount() {
  fetch(HEAVY_CALL)
    .then(response => response.json())
    .then(responseJSON => {
      // 先把所有交易数据一次性整理好
      const txs = responseJSON.result;
      // 只调用一次setState更新状态
      this.setState({ transactions: txs });
    })
    .catch(error => {
      // 别忘了加上错误处理，避免API失败导致应用异常
      console.error('API调用出错:', error);
    });
}

2. 分批次处理数据，避免阻塞JS线程 #

如果数据量实在太大，一次性处理还是会卡UI，可以把数据分成小批次，利用setImmediate让UI线程有喘息的机会：

componentDidMount() {
  fetch(HEAVY_CALL)
    .then(response => response.json())
    .then(responseJSON => {
      const allTransactions = responseJSON.result;
      const batchSize = 50; // 每次处理50条，可根据实际情况调整
      let currentIndex = 0;

      const processBatch = () => {
        const endIndex = Math.min(currentIndex + batchSize, allTransactions.length);
        const batch = allTransactions.slice(currentIndex, endIndex);
        
        // 合并批次数据到现有状态
        this.setState(prevState => ({
          transactions: [...prevState.transactions, ...batch]
        }), () => {
          currentIndex = endIndex;
          if (currentIndex < allTransactions.length) {
            // 让UI线程先处理完当前任务，再继续下一批次
            setImmediate(processBatch);
          }
        });
      };

      // 初始化状态后开始分批处理
      this.setState({ transactions: [] }, processBatch);
    })
    .catch(error => console.error('API调用出错:', error));
}

3. 优化SectionList的渲染性能 #

你的SectionList还有几个可以优化的点，能进一步提升滚动流畅度：

（1）去掉嵌套的ScrollView #

SectionList本身已经是滚动容器，外层嵌套ScrollView会导致滚动冲突和额外的性能开销，直接去掉即可：

render() {
  const sections = [
    // 注意这里要把transactions数组转成SectionList需要的结构
    { 
      data: this.state.transactions.map(tx => ({ value: tx, type: 'transactions' })), 
      title: 'Transactions'
    }
  ];
  return (
    <View style={styles.container}>
      <SectionList 
        style={styles.container}
        renderItem={this._renderItem}
        renderSectionHeader={this._renderSectionHeader}
        stickySectionHeadersEnabled={true}
        // 用交易的唯一ID作为key，不要用index（index会在数据变化时导致错误的复用）
        keyExtractor={(item) => item.value.transactionId} 
        ListHeaderComponent={this._renderListHeader}
        refreshing={this.state.refreshing}
        sections={sections}
        // 开启移除不可见视图，减少内存占用
        removeClippedSubviews={true}
        // 调整虚拟渲染窗口大小，默认21，调小可以降低内存压力
        windowSize={5}
      />
    </View>
  );
}

（2）缓存渲染项组件 #

用React.memo包裹你的_renderItem对应的组件，避免不必要的重渲染：

// 单独抽离渲染项组件，用React.memo缓存
const TransactionItem = React.memo(({ item }) => {
  return (
    <View style={styles.transactionItem}>
      <Text>{item.value.amount}</Text>
      {/* 其他交易信息渲染 */}
    </View>
  );
});

// 在组件内使用缓存后的组件
_renderItem = ({ item }) => {
  return <TransactionItem item={item} />;
};

4. 可选：实现懒加载/分页加载 #

如果你的API支持分页，可以考虑滚动到底部时再加载下一页数据，这样一次性加载的数据量会大幅减少，从根源上缓解卡顿。比如监听SectionList的onEndReached事件：

// 在state里添加分页相关状态
state = {
  transactions: [],
  page: 1,
  hasMore: true,
  refreshing: false
};

// 加载下一页的方法
loadNextPage = () => {
  if (!this.state.hasMore) return;
  fetch(`${HEAVY_CALL}?page=${this.state.page}`)
    .then(response => response.json())
    .then(responseJSON => {
      const newTransactions = responseJSON.result;
      this.setState(prevState => ({
        transactions: [...prevState.transactions, ...newTransactions],
        page: prevState.page + 1,
        hasMore: newTransactions.length > 0
      }));
    });
};

// 在SectionList里添加相关属性
<SectionList
  // ...其他属性
  onEndReached={this.loadNextPage}
  onEndReachedThreshold={0.1} // 距离底部10%时触发加载
/>

把这些方案结合起来，应该能显著改善应用的卡顿问题。

内容的提问来源于stack exchange，提问作者SwimmingG