关于state刷新界面的思考

我们知道当state更新时，界面会重新绘制，render会被执行，但是一个界面包含许多控件，state更新导致界面重绘，那么是否所有的控件都重绘呢？

验证

通过一个点击事件来改变state的值，然后看看界面有什么变化，代码如下：

import React,{Component} from 'react';
import {View,TouchableOpacity,Text,
} from 'react-native';export default class Test extends Component{constructor(props){super(props);this.state = ({count:0,});}_onPress(){var count = this.state.count + 1;this.setState({count:count,});}render(){return(<View><TouchableOpacity onPress={this._onPress.bind(this)}><Text>刷新界面{this.state.count}</Text></TouchableOpacity><Test2 /></View>);}
}
//定义另一个组件Test2，被Test所引用
class Test2 extends Component{render(){console.log('Test2 render');return(<View><Text>Test2</Text></View>);}
}

点击‘刷新界面’，可以看到Test下的Text内容改变了，Test2的日志也有输出，说明在这种情况下，state的改变，会重写执行render，使界面重新绘制，并且所有子控件默认都会重新绘制。可是你发现Test2只是固定显示一个文本，那么即使再重新绘制它还是不变的，这样就做了无用功，浪费了界面渲染时间。所以，是否可以优化这种state带来的界面重新渲染的性能问题呢？答案是有的。

每个Component都有一个函数shouldComponentUpdate，这个函数返回是否需要更新组件。当state的值有变化时，先执行此方法，此返回值为true/false，判断是否执行更新操作，即是否执行render渲染。那么，在我们这个例子中，Test2组件只是显示一个固定的文本，所以返回一个false即可。

class Test2 extends Component{shouldComponentUpdate(nextProps,nextState){//写自己的逻辑判断是否需要更新组件return false;}render(){console.log('Test2 render');return(<View><Text>Test2</Text></View>);}
}

总结

在项目开发的过程中，我们总会自定义一些组件，这些组件总会被其他组件所引用，在知道了state的刷新问题之后，重写shouldComponentUpdate这个函数，对我们来说格外重要，可以让我们清楚的明白，这个组件什么情况下需要被更新，什么情况下不需要更新。这样做的好处就是，可以大大的提高界面的刷新速度，而这不就是我们所追求的吗！

关于state刷新界面的思考相关推荐

WPF刷新界面之坎坷路
项目需要一个硬件检测功能,需要用到界面刷新,刚开始想用个定时器,对检测过的硬设定时添加后刷新界面. 但是很遗憾,定时器并不能进行刷新.后台检测List数据里面已经添加了很多了很多数据了,就是不能显示到 ...
JS解决在提交form表单时某个值不存在 alter弹窗点确定不刷新界面
<form action="" method="post" onsubmit="return checkname()"> < ...
android中view刷新界面,Android view invalidate()使用
Android提供了Invalidate方法實現界面刷新,但是Invalidate不能直接在線程中調用,因為他是違背了單線程模型:androidUI操作並不是線程安全的,並且這些操作必須在UI線程中調 ...
如何让fragment刷新界面_快速实现android版抖音主界面的心得
原文作者:DK_BurNIng 如何快速确定竞品某个界面的实现方式? 当你收到产品一个需求是模仿某个竞品且时间很短没有过多时间给你调研技术方案的时候,如何尽快确定这个功能的技术方案呢? 这里我给出我自 ...
delphi刷新界面所选行丢失问题
2019独角兽企业重金招聘Python工程师标准>>> procedure TFram.ado_khAfterPost(DataSet: TDataSet); var IDs: st ...
EXC_BAD_ACCESS(code=2,address=0xcc 异常解决及建议不要在子线程中刷新界面
EXC_BAD_ACCESS(code=2,address=0xcc 异常解决及建议不要在子线程中刷新界面参考文章: (1)EXC_BAD_ACCESS(code=2,address=0xcc ...
vue 刷新界面解决闪屏和iOS失效问题
vue 刷新界面解决闪屏和iOS失效问题 vue中: 1 this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好,关键是在ios系统中 ...
chrome浏览器如何不使用缓存如何强制刷新界面 Ctrl+Shift+R
Ctrl+Shift+R chrome浏览器如何不使用缓存如何强制刷新界面-百度经验 chrome清楚缓存并硬性重新加载_谷歌浏览器清空缓存并硬性重新加载_蓝色清晨_的博客-CSDN博客
java 刷新界面_利用java如何实现在删除信息后刷新页面功能
利用java如何实现在删除信息后刷新页面功能发布时间:2020-11-17 14:25:49 来源:亿速云阅读:74 作者:Leah 这篇文章给大家介绍利用java如何实现在删除信息后刷新页面功能 ...

关于state刷新界面的思考

验证

总结

关于state刷新界面的思考相关推荐

最新文章

热门文章