React Native 性能优化实战

性能问题的常见表现

在开发 React Native 应用时，我们经常会遇到以下性能问题：

1. 界面卡顿：列表滚动不流畅
2. 启动时间长：应用打开需要等待
3. 内存泄漏：应用运行一段时间后崩溃
4. 帧率下降：动画不流畅

列表优化

使用 FlatList 而非 ScrollView

FlatList 是高性能的列表组件，它会按需渲染可见的项：

<FlatList
  data={data}
  renderItem={({ item }) => <ListItem item={item} />}
  keyExtractor={item => item.id}
/>

优化 renderItem

确保 renderItem 返回的组件是纯组件：

const ListItem = React.memo(({ item }) => {
  return <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
})

图片优化

使用合适的图片格式

• 对于图标，使用 SVG
• 对于照片，使用 WebP 格式
• 压缩图片大小

使用 FastImage

FastImage 是一个高性能的图片加载库：

import FastImage from 'react-native-fast-image'

<FastImage
  source={{
    uri: 'https://example.com/image.jpg',
    headers: { Authorization: 'someAuthToken' },
  }}
  style={{ width: 200, height: 200 }}
  resizeMode={FastImage.resizeMode.contain}
/>

内存管理

清理定时器和监听器

在组件卸载时清理：

useEffect(() => {
  const timer = setInterval(() => {
    // do something
  }, 1000)
  
  return () => clearInterval(timer)
}, [])

避免内存泄漏

确保正确处理异步操作：

useEffect(() => {
  let isMounted = true
  
  fetchData().then(data => {
    if (isMounted) {
      setData(data)
    }
  })
  
  return () => {
    isMounted = false
  }
}, [])

总结

性能优化是一个持续的过程，需要不断地监测和改进。通过以上方法，可以显著提升 React Native 应用的性能。