【REACT NATIVE 系列教程之六】重写SHOULDCOMPONENTUPDATE指定组
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2252.html
前几天,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'; 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; 这里MyText组件中就包了一个Text组件,且值是通过使用的父使用时进行传入进来的。 看这么一代码段: shouldComponentUpdate(nextProps,nextState){ returnnextProps.myTextContent===this.props.myTextContent; } 上文介绍过这个函数了,其实如果默认不写这个函数,默认是跟随父重绘进行重绘。但是当重写此函数后,那么就看我们此函数中返回的是true还是false了,如果是true,就是跟着父进行重绘,返回false就是不跟随更新重新。 这里Himi在此函数中做了一句逻辑代码,比较上次父传来的值是否与本次一致,如果一致返回true,反之返回false。 二:尝试使用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); 以上主要做了如下功能: 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |