React Native如何高效渲染大量文本解决页面切换卡顿问题

卡顿核心原因 #

你当前的实现是将所有文本内容一次性全部渲染到ScrollView中，每个独立的<Text>组件都会对应创建一个原生视图，几十上百个视图同步创建会阻塞页面跳转的动画线程，自然会出现明显卡顿。

可落地的优化方案 #

1. 最简优化：合并同样式Text组件，减少原生视图数量 #

相同样式的文本不要拆分到多个<Text>中，可通过换行符\n拼接后放入单个<Text>组件，能直接减少90%以上的原生视图创建开销：

// 优化前：5个Text组件
{dataOne.pgOne.slice(3,8).map((item, index)=>{
  return  <Text key={`${index}+unique1`}>
            {`\u2022 ${item}`}
          </Text>
})}

// 优化后：1个Text组件
<Text>
  {dataOne.pgOne.slice(3,8).map(item => `\u2022 ${item}`).join('\n')}
</Text>

2. 替换ScrollView为FlatList实现懒渲染 #

即使是非列表类的分块内容，也可以将页面按内容区块拆分为少数几个列表项，用FlatList承载。FlatList默认只渲染视口内的内容，非首屏的内容会等滚动到对应位置再渲染，页面跳转时仅需要渲染首屏的2-3个区块，开销极低：

import { FlatList } from 'react-native';

// 把页面内容按区块拆成数据源
const pageSections = [
  { type: 'title', content: 'About Finance Act 2019' },
  { type: 'block1', content: dataOne.pgOne.slice(1,8) },
  { type: 'block2', content: dataOne.pgOne.slice(8,31) },
  { type: 'highlight', content: dataOne.pgOne.slice(31,35) }
];

function TabOneContents(){
  const renderItem = ({ item }) => {
    switch(item.type) {
      case 'title':
        return <>
          <MyDivider/>
          <Text>{item.content}</Text>
          <MyDivider/>
        </>
      case 'block1':
        return <View>
          <Text>{item.content[0]}</Text>
          <Text>{item.content[1]}</Text>
          <Text>
            {item.content.slice(2).map(i => `\u2022 ${i}`).join('\n')}
          </Text>
        </View>
      // 其他区块的渲染逻辑同理
    }
  };

  return <FlatList
    data={pageSections}
    renderItem={renderItem}
    keyExtractor={(item, index) => `section_${index}`}
  />
}

3. 延迟渲染非首屏内容 #

如果不想改整体结构，可以用InteractionManager等待页面跳转动画完全结束后再渲染非首屏的内容，避免动画和渲染抢资源：

import { InteractionManager, useState, useEffect } from 'react-native';

function TabOneContents(){
  const [renderAll, setRenderAll] = useState(false);

  useEffect(() => {
    // 等所有交互/动画结束后再加载完整内容
    InteractionManager.runAfterInteractions(() => {
      setRenderAll(true);
    });
  }, []);

  return(
    <ScrollView>
      {/* 首屏可见的内容正常渲染 */}
      <MyDivider/>
      <Text>About Finance Act 2019</Text>
      <MyDivider/>
      <View>
        <Text>{dataOne.pgOne[1]}</Text>
        <Text>{dataOne.pgOne[2]}</Text>
        <Text>
          {dataOne.pgOne.slice(3,8).map(i => `\u2022 ${i}`).join('\n')}
        </Text>
      </View>
      {/* 非首屏内容等动画结束后再渲染 */}
      {renderAll && <>
        <View>
          {/* 剩下的所有内容 */}
        </View>
        <MyDivider/>
        <View style={[styles.container1,{backgroundColor: '#ff23'}]}>
          {/* 高亮区块内容 */}
        </View>
        <MyDivider/>
      </>}
    </ScrollView>
  )
}

4. 超长篇内容可选WebView渲染 #

如果单页内容超过万字，React Native原生Text的渲染性能依然不够，可以把内容拼接成简单的HTML字符串，用WebView承载。WebView内核本身对大文本的滚动、渲染做了深度优化，流畅度会远高于原生Text组件，非常适合纯查阅类的文本场景。

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