React组件中this的指向
分类
- React组件生命周期函数中的this指向组件实例；
- 自定义组件方法的this会因调用者不同而不同；
- 为了在组件的自定义方法中获取组件实例，需要手动绑定this到组将实例。
示例
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
| import React from 'react';
const STR = '被调用，this指向：';
class App extends React.Component{
constructor(){
super()
}
ComponentDidMount() {
console.log(`ComponentDidMount ${STR}`,this);
}
componentWillReceiveProps() {
console.log(`componentWillReceiveProps ${STR}`,this);
}
shouldComponentUpdate() {
console.log(`shouldComponentUpdate ${STR}`,this);
return true;
}
componentDidUpdate() {
console.log(`componentDidUpdate ${STR}`,this);
}
componentWillUnmount() {
console.log(`componentWillUnmount ${STR}`,this);
}
handler() {
console.log(`handler ${STR}`,this);
}
render(){
console.log(`render ${STR}`,this);
this.handler();
window.handler = this.handler;
window.handler();
return(
<div>
<h1>hello World</h1>
<label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
<input id = "btn" type="button" value = '单击' onClick = {this.handler}/>
</div>
)
}
}
export default App
|
-
Next Post
Git常用命令
-
Previous Post
React学习笔记（六）
