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

Posted 李华明Himi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项!

REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项!

REACT NATIVE 系列教程之三函数绑定与FLEXBOX是用好REACT的基础

REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

(c)2006-2024 SYSTEM All Rights Reserved IT常识