react-native、rn使用this.setState后屏幕闪烁

最新推荐文章于 2024-06-13 14:11:58 发布

冉冉YY

最新推荐文章于 2024-06-13 14:11:58 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react native js rn

本文链接：https://blog.youkuaiyun.com/m0_37681570/article/details/87096393

js 同时被 3 个专栏收录

2 篇文章

订阅专栏

react native

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文探讨了React Native开发中，使用this.setState更新数据导致组件闪烁的问题，特别是在图片较多时更为明显。文章提出了解决方案，即将界面拆分为多个子组件，并在子组件内部使用this.setState，以减少不必要的重渲染，从而提升应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用react-native开发，如果只用一个组件写的话，当你使用this.setState更新数据后，会导致整个组件或者说整个屏幕闪烁，特别是图片多的时候，更加明显。这种是很耗性能的。
解决方案：

分成多个组件，在子组件内部使用this.setState

export default class Main extends Component {
	constructor(props) {
		super(props);
        this.state = {
        	data:''
        }
	}
	render(){
		return(
			<Children />
		)
	}
}
class Children extends Component {
	constructor(props) {
		super(props);
        this.state = {
        	data:''
        }
	}
	change(){
		this.setState({
			data:'改变'
		})
	}
	render(){
		return(
			<TouchableOpacity onPress={()=>{this.change()}}>
				<Text>我是子组件，我要改变自己的状态</Text>
			</TouchableOpacity>
		)
	}
}