Voyz's Studio.

React学习笔记(七)

字数统计: 248阅读时长: 1 min
2019/04/26 Share

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
CATALOG
  1. 1. React组件中this的指向
    1. 1.1. 分类
    2. 1.2. 示例