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

本站文章均为  李华明Himi  原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2252.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2252.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

前几天，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组件，非常简单：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import React , {    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组件，且值是通过使用的父使用时进行传入进来的。

看这么一代码段：

1 2 3

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

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

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

二：尝试使用MyText代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

import React , {    AppRegistry ,    Component ,    StyleSheet ,    View ,    Text ,    TouchableHighlight , } from 'react-native' ;   import MyText from './MyText'   class AwesomeProject extends Component { constructor ( props ) { super ( props ) ; this . state = {        refreshName : '点击我进行刷新页面' ,      } ; }      testEvent ( ) {      this . setState ( { refreshName : 'Himi' } ) ;    }      render ( ) {      return (          < View style = { styles . himiViewStyle } >            < Text style = { styles . himiTextStyle } > Himi React Native 教程 < / Text >              < View style = { 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组件

总结：

1.当触发响应函数进行重绘所有组件时，正常情况下来说，不论Text还是MyText的内容都应该更改为“Himi”，但是因为MyText重写了shouldComponentUpdate，且判断上次与本次传入的myTextContent内容不同，因此返回false，不重绘本组件。

2.当第二次触发响应函数进行重绘所有组件时，Text仍旧会被重绘，而且MyText由于shouldComponentUpdate函数中，此时传入的myTextContent内容与上次传入的相同（虽然上次没有重绘，但是myTextContent已被记录），因此返回true，MyText也会被重绘。

效果如下（点击查看动态图）：

更多的生命周期详解，官方链接：http://reactjs.cn/react/docs/component-specs.html