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

   <p>前几天，Himi 写练手项目时，遇到子更新父state中的某一个属性值，且对父进行重绘时，父包含的所有子组件都进行重绘 – -… 非常尴尬。</p>    <p>查阅了RN文档，终于在生命周期篇看到了想要的答案。</p>    <p>仔细看过RN关于生命周期篇的童鞋应该知道，就是它：shouldComponentUpdate</p>    <p>官方解释此函数：</p>    <p>在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。</p>    <p>如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。</p>    <p>如果 shouldComponentUpdate 返回 false，则 render() 将不会执行 ，直到下一次 state 改变。（另外，componentWillUpdate 和 componentDidUpdate 也不会被调用。）</p>    <p>默认情况下，shouldComponentUpdate 总会返回 true ，在 state 改变的时候避免细微的 bug，但是如果总是小心地把 state 当做不可变的，在 render() 中只从 props 和 state 读取值，此时你可以覆盖 shouldComponentUpdate 方法，实现新老 props 和 state 的比对逻辑。</p>    <p>如果性能是个瓶颈，尤其是有几十个甚至上百个组件的时候，使用 shouldComponentUpdate 可以提升应用的性能。</p>    <p>那么Himi下面简单举例来详细说明～</p>    <p>一：首先Himi自己定义了一个MyText组件，非常简单：</p>    <pre>  <code class="language-javascript">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;  </code></pre>    <p>这里MyText组件中就包了一个Text组件，且值是通过使用的父使用时进行传入进来的。</p>    <p>看这么一代码段：</p>    <pre>  <code class="language-javascript">shouldComponentUpdate(nextProps, nextState) {      return nextProps.myTextContent === this.props.myTextContent;  }  </code></pre>    <p>上文介绍过这个函数了，其实如果默认不写这个函数，默认是跟随父重绘进行重绘。但是当重写此函数后，那么就看我们此函数中返回的是true还是false了，如果是true，就是跟着父进行重绘，返回false就是不跟随更新重新。</p>    <p>这里Himi在此函数中做了一句逻辑代码，比较上次父传来的值是否与本次一致，如果一致返回true，反之返回false。</p>    <p>二：尝试使用MyText代码：</p>    <pre>  <code class="language-javascript">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);  </code></pre>    <p>以上主要做了如下功能：</p>    <p>1. 添加一个TouchableHighlight组件用于响应函数，重绘本类下的所有组件。</p>    <p>2. 添加了一个文本Text组件</p>    <p>3. 添加了我们刚才自定义的MyText组件</p>    <p>总结：</p>    <p>1.当触发响应函数进行重绘所有组件时，正常情况下来说，不论Text还是MyText的内容都应该更改为“Himi”，但是因为MyText重写了shouldComponentUpdate，且判断上次与本次传入的myTextContent内容不同，因此返回false，不重绘本组件。</p>    <p>2.当第二次触发响应函数进行重绘所有组件时，Text仍旧会被重绘，而且MyText由于shouldComponentUpdate函数中，此时传入的myTextContent内容与上次传入的相同（虽然上次没有重绘，但是myTextContent已被记录），因此返回true，MyText也会被重绘。</p>    <p>效果如下（点击查看动态图）：</p>    <p><img src="https://simg.open-open.com/show/f238ec46d796bc3783c10192fc136a5c.gif"></p>    <p>更多的生命周期详解，官方链接： <a href="/misc/goto?guid=4959651586467362094" rel="nofollow,noindex">http://reactjs.cn/react/docs/component-specs.html</a></p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959673721322756738" rel="nofollow">http://www.himigame.com/react-native/2252.html</a></p>    <p> </p>