转载

【REACT NATIVE 系列教程之六】重写shouldComponentUpdate指定组件是否进行重绘

前几天，Himi 写练手项目时，遇到子更新父state中的某一个属性值，且对父进行重绘时，父包含的所有子组件都进行重绘 – -… 非常尴尬。

查阅了RN文档，终于在生命周期篇看到了想要的答案。

仔细看过RN关于生命周期篇的童鞋应该知道，就是它：shouldComponentUpdate

官方解释此函数：

在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。

如果确定新的 props 和 state 不会导致组件更新，则此处应该返回 false。

如果 shouldComponentUpdate 返回 false，则 render() 将不会执行，直到下一次 state 改变。（另外，componentWillUpdate 和 componentDidUpdate 也不会被调用。）

默认情况下，shouldComponentUpdate 总会返回 true ，在 state 改变的时候避免细微的 bug，但是如果总是小心地把 state 当做不可变的，在 render() 中只从 props 和 state 读取值，此时你可以覆盖 shouldComponentUpdate 方法，实现新老 props 和 state 的比对逻辑。

如果性能是个瓶颈，尤其是有几十个甚至上百个组件的时候，使用 shouldComponentUpdate 可以提升应用的性能。

那么Himi下面简单举例来详细说明～

一：首先Himi自己定义了一个MyText组件，非常简单：

importReact, {   AppRegistry,   Component,   Text, } from 'react-native';   class MyText extends Component {  constructor(props) {  super(props);  this.state = {};  }    shouldComponentUpdate(nextProps, nextState) {     return nextProps.myTextContent === this.props.myTextContent;  }    render() {  return (   <Text> {this.props.myTextContent}  </Text>  )   } } module.exports = MyText;

这里MyText组件中就包了一个Text组件，且值是通过使用的父使用时进行传入进来的。

看这么一代码段：

shouldComponentUpdate(nextProps, nextState) {     return nextProps.myTextContent === this.props.myTextContent; }

上文介绍过这个函数了，其实如果默认不写这个函数，默认是跟随父重绘进行重绘。但是当重写此函数后，那么就看我们此函数中返回的是true还是false了，如果是true，就是跟着父进行重绘，返回false就是不跟随更新重新。

这里Himi在此函数中做了一句逻辑代码，比较上次父传来的值是否与本次一致，如果一致返回true，反之返回false。

二：尝试使用MyText代码：

importReact, {   AppRegistry,   Component,   StyleSheet,   View,   Text,   TouchableHighlight, } from 'react-native';   importMyTextfrom './MyText'   class AwesomeProject extends Component {  constructor(props) {  super(props);  this.state = {       refreshName :'点击我进行刷新页面',     };  }     testEvent(){     this.setState({refreshName:'Himi'});   }     render() {     return (         <Viewstyle={styles.himiViewStyle} >           <Text style={styles.himiTextStyle}>HimiReactNative 教程 </Text>             <Viewstyle={styles.himiViewStyle}>             <TouchableHighlight               underlayColor='#4169e1'               onPress={this.testEvent.bind(this)}               >                 <Text style={styles.text} > {this.state.refreshName} </Text>             </TouchableHighlight>               <MyText  myTextContent={this.state.refreshName} />             </View>       </View>     )   } };   var styles = 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);

以上主要做了如下功能：

1. 添加一个TouchableHighlight组件用于响应函数，重绘本类下的所有组件。

2. 添加了一个文本Text组件

3. 添加了我们刚才自定义的MyText组件