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组件,且值是通过使用的父使用时进行传入进来的。
看这么一代码段:
|
|
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
所有评论(0)