本站文章均为 李华明Himi 原创,转载务必在明显处注明：
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2252.html
@H_502_9@ @H_502_9@前几天，Himi 写练手项目时，遇到子更新父state中的某一个属性值，且对父进行重绘时，父包含的所有子组件都进行重绘 � -… 非常尴尬。 @H_502_9@查阅了RN文档，终于在生命周期篇看到了想要的答案。 @H_502_9@仔细看过RN关于生命周期篇的童鞋应该知道，就是它：shouldComponentUpdate @H_502_9@官方解释此函数： @H_502_9@在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。 @H_502_9@如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。 @H_502_9@如果 shouldComponentUpdate 返回 false，则 render() 将不会执行，直到下一次 state 改变。（另外，componentWillUpdate 和 componentDidUpdate 也不会被调用。） @H_502_9@默认情况下，shouldComponentUpdate 总会返回 true，在 state 改变的时候避免细微的 bug，但是如果总是小心地把 state 当做不可变的，在 render() 中只从 props 和 state 读取值，此时你可以覆盖 shouldComponentUpdate 方法，实现新老 props 和 state 的比对逻辑。 @H_502_9@如果性能是个瓶颈，尤其是有几十个甚至上百个组件的时候，使用 shouldComponentUpdate 可以提升应用的性能。 @H_502_9@那么Himi下面简单举例来详细说明～ @H_502_9@一：首先Himi自己定义了一个MyText组件，非常简单：
importReact,{
AppRegistry,Component,Text,}from'react-native';
classMyTextextendsComponent{
constructor(props){
super(props);
this.state={};
}
shouldComponentUpdate(nextProps,nextState){
returnnextProps.myTextContent===this.props.myTextContent;
}
render(){
return(
<Text>{this.props.myTextContent}</Text>
)
}
}
module.exports=MyText;
@H_502_9@@H_502_9@这里MyText组件中就包了一个Text组件，且值是通过使用的父使用时进行传入进来的。 @H_502_9@看这么一代码段：
shouldComponentUpdate(nextProps,nextState){
returnnextProps.myTextContent===this.props.myTextContent;
}
@H_502_9@@H_502_9@上文介绍过这个函数了，其实如果默认不写这个函数，默认是跟随父重绘进行重绘。但是当重写此函数后，那么就看我们此函数中返回的是true还是false了，如果是true，就是跟着父进行重绘，返回false就是不跟随更新重新。 @H_502_9@这里Himi在此函数中做了一句逻辑代码，比较上次父传来的值是否与本次一致，如果一致返回true，反之返回false。 @H_502_9@二：尝试使用MyText代码：
importReact,StyleSheet,View,TouchableHighlight,}from'react-native';
importMyTextfrom'./MyText'
classAwesomeProjectextendsComponent{
constructor(props){
super(props);
this.state={
refreshName:'点击我进行刷新页面',};
}
testEvent(){
this.setState({refreshName:'Himi'});
}
render(){
return(
<Viewstyle={styles.himiViewStyle}>
<Textstyle={styles.himiTextStyle}>HimiReactNative教程</Text>
<Viewstyle={styles.himiViewStyle}>
<TouchableHighlight
underlayColor='#4169e1'
onPress={this.testEvent.bind(this)}
>
<Textstyle={styles.text}>{this.state.refreshName}</Text>
</TouchableHighlight>
<MyTextmyTextContent={this.state.refreshName}/>
</View>
</View>
)
}
};
varstyles=StyleSheet.create({
text:{
color:'#f00',fontSize:20,},himiViewStyle:{
flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',himiTextStyle:{
color:'#f00',fontSize:30,marginTop:70,});
AppRegistry.registerComponent('AwesomeProject',()=>AwesomeProject);
@H_502_9@@H_502_9@以上主要做了如下功能： @H_502_9@1. 添加一个TouchableHighlight组件用于响应函数，重绘本类下的所有组件。 @H_502_9@2. 添加了一个文本Text组件 @H_502_9@3. 添加了我们刚才自定义的MyText组件 @H_502_9@总结： @H_502_9@1.当触发响应函数进行重绘所有组件时，正常情况下来说，不论Text还是MyText的内容都应该更改为“Himi”，但是因为MyText重写了shouldComponentUpdate，且判断上次与本次传入的myTextContent内容不同，因此返回false，不重绘本组件。 @H_502_9@2.当第二次触发响应函数进行重绘所有组件时，Text仍旧会被重绘，而且MyText由于shouldComponentUpdate函数中，此时传入的myTextContent内容与上次传入的相同（虽然上次没有重绘，但是myTextContent已被记录），因此返回true，MyText也会被重绘。 @H_502_9@效果如下（点击查看动态图）： @H_502_9@
