React Native性能优化指南

import React from 'react';
import { Text, View, Image } from 'react-native';
 
// 优化后的图片组件
export default class OptimizedImage extends React.PureComponent {
  render() {
    const { source, style, resizeMode } = this.props;
    // 仅当source变化时，才重新渲染Image组件
    return <Image source={source} style={style} resizeMode={resizeMode} />;
  }
}
 
// 使用优化后的图片组件
export class MyComponent extends React.Component {
  render() {
    const imageSource = { uri: 'https://example.com/my-image.png' };
    return (
      <View>
        <OptimizedImage source={imageSource} style={{ width: 200, height: 200 }} resizeMode="contain" />
      </View>
    );
  }
}

这个例子展示了如何创建一个优化过的Image组件，它使用React.PureComponent来防止由于每次渲染都产生新的Image实例导致的不必要的重渲染。同时，它也展示了如何在实际的组件中使用这个优化过的Image组件。这个例子旨在教育开发者如何在React Native应用中进行性能优化。