概述
ref属性是一个特殊的属性，可以把它挂载到任何组件
它可以是一个回调函数（也可以是一个字符串，基本废弃这种用法）
这个回调函数在组件被挂载后立即被执行，应用到的组件作为参数传递
回调函数可以立即使用组件，也可以将参数的组件引用保存起来，后续使用（调用组件方法或者获取组件参数）
ref属性指定回调方法
栗子：
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
result: '点击前'
};
}
render() {
return (
<View style={styles.content}>
<Text style={styles.button} onPress={
() => {
this._Test.print()
}
}
}>{this.state.result}</Text>
<RefTest ref={
//指定ref属性的回调函数
(e) => {
console.warn("ref的回调执行了！")
//参数e则为当前RefTest组件的引用
this._Test = e;
}
}>
</RefTest>
</View>
)
}
}
const styles = StyleSheet.create({
content: {
flex: 1,
backgroundColor: '#00a056',
flexDirection: 'row'
},
button: {
padding: 30,
backgroundColor: '#ffffff',
fontSize: 17,
alignSelf: 'center'
},
text: {
padding: 30,
backgroundColor: '#ffffff',
fontSize: 30,
}
})
class RefTest extends Component<Props> {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
data: 'old'
};
}
print() {
this.setState((preState, props) => {
return {
data: 'new'
}
})
console.warn("print方法执行了：" + this.state.data)
}
render() {
return (
<View style={{
alignSelf: 'center',
left: 10,
backgroundColor: '#ffff00',
}}>
<Text style={styles.text}>
当前数据：{this.state.data}
</Text>
</View>
);
}
}
|
可以看到：
- 父组件拥有的子组件，子组件有ref属性
- 首次进入的时候，组件初次绑定 ref的回调会执行一次，父组件保存该引用
- 点击后，使用组件引用，调用组件方法print
- 若点击后，父组件setState，则子组件 卸载后，重新调用子组件Rend（）方法，这个过程，子组件的ref回调会被调用两次（卸载一次，挂载一次）
需要知道的：
- 在父组件在子组件指定ref的回调中保存引用对子组件的
- 这个回调在父组件每次setState（父Render（）调用）
- 组件的render方法被调用时，ref才会被调用，组件才会返回ref
- setState涉及先卸载，后挂载，ref回调执行两次
