(十四)Reactnative中ref属相详解
来源:互联网 发布:淘宝美工的工作流程 编辑:程序博客网 时间:2024/05/17 04:04
在用Reactnative写工程时,默认奇妙的有一种像OC中,或者java 中或者当前类的私有属性的想法,state 和props都不能满足时,就是ref
它能达到其他语言中持有一个view组件,并且局部的刷新
ref 接受值为string类型的参数或者一个函数function
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
需要提醒大家的是,只有在组件的render方法被调用时,ref才会被调用,组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用,那么你得到的是undefined。
心得:ref属性在开发中使用频率很高,使用它你可以获取到任何你想要获取的组件的对象,有个这个对象你就可以灵活地做很多事情,比如:读写对象的变量,甚至调用对象的函数。
让组件做到局部刷新setNativeProps
有时候我们需要直接改动组件并触发局部的刷新,但不使用state或是props。
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。
- 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
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 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
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
当点击按钮时,会刷新3个控件的值,但是只是单独去改变,而不是通过改变state状态机的机制来刷新界面,在重复需要多次刷新时使用,普通的时候直接通过state改变即可。
这样用的缺点就是局部改变,回导致状态机混乱。
0 0
- (十四)Reactnative中ref属相详解
- (十七)ReactNative 中动画详解
- Android ImageView.ScaleType 属相详解
- 第二章 实体,属相详解
- C#中使用ref和out详解
- ReactNative Animated动画详解
- ReactNative组件详解
- ReactNative SectionList使用详解
- ReactNative Image组件详解
- ReactNative WebView组件详解
- ReactNative ViewPageAndroid组件详解
- React 之ref 详解
- out和ref详解
- ReactNative 中 static propTypes
- iOS中嵌入ReactNative
- ReactNative学习十四-再次弹性盒(Flexbox)
- ReactNative系列之十四评分效果的实现
- 生肖属相
- I/O流
- barn1<uscao>1.3 -<贪心>
- 2016冬季练习
- 微博账号被盗,你大V又能怎么样?
- phpredis "read error on connection" 的解决办法
- (十四)Reactnative中ref属相详解
- 控件记录之toggleButton
- 如何做到有扎实的 Java 基础
- Gson使用指南
- js绘制流程图、图表------with mermaid.js
- java类中的变量和方法
- IDEA插件配置之Eclipse Code Formatter
- NRF51822 DTM test & NI5644R BLE DTM test
- HTML+CSS