这次给大家带来在react组件中的this如何使用，在react组件中的this使用的注意事项有哪些，下面就是实战案例，一起来看一下。
react组件的this是什么
通过编写一个简单组件，并渲染出来，分别打印出自定义函数和render中的this：
import react from 'react';
const str = '被调用，this指向：';
class app extends react.component{
constructor(){
super()
}
//测试函数
handler() {
console.log(`handler ${str}`,this);
}
render(){
console.log(`render ${str}`,this);
return(
<p>
<h1>hello world</h1>
<label htmlfor = 'btn'>单击打印函数handler中this的指向</label>
<input id = "btn" type="button" value = '单击' onclick = {this.handler}/>
</p>
)
}
}
export default app
结果如图：
可以看到，render函数中的this指向了组件实例，而handler（）函数中的this则为undefined，这是为何？
javascript函数中的this
我们都知道javascript函数中的this不是在函数声明的时候定义的，而是在函数调用（即运行）的时候定义的
var student = {
func: function() {
console.log(this);
};
};
student.func();
var studentfunc = student.func;
studentfunc();
这段代码运行，可以看到student.func()打印了student对象，因为此时this指向student对象；而studentfunc()打印了window，因为此时由window调用的，this指向window。
这段代码形象的验证了，javascript函数中的this不是在函数声明的时候，而是在函数运行的时候定义的；
同样，react组件也遵循javascript的这种特性，所以组件方法的‘调用者'不同会导致this的不同（这里的 “调用者” 指的是函数执行时的当前对象）
“调用者”不同导致this不同
测试：分别在组件自带的生命周期函数以及自定义函数中打印this，并在render（）方法中分别使用this.handler(),window.handler(),oncilck={this.handler}这三种方法调用handler（）：
/app.jsx //测试函数
handler() {
console.log(`handler ${str}`,this);
}
render(){
console.log(`render ${str}`,this);
this.handler();
window.handler = this.handler;
window.handler();
return(
<p>
<h1>hello world</h1>
<label htmlfor = 'btn'>单击打印函数handler中this的指向</label>
<input id = "btn" type="button" value = '单击' onclick = {this.handler}/>
</p>
)
}
}
export default app
可以看到：
render中this -> 组件实例app对象；
render中this.handler() -> 组件实例app对象 ;
render中window.handler() -> window对象；
onclick ={this.handler} -> undefined
继续使用事件触发组件的装载、更新和卸载过程：
/index.jsimport react from 'react'
import {render,unmountcomponentatnode} from 'react-dom'
import app from './app.jsx'
const root=document.getelementbyid('root')
console.log(首次挂载);
let instance = render(<app />,root);
window.rendercomponent = () => {
console.log(挂载);
instance = render(<app />,root);
}
window.setstate = () => {
console.log(更新);
instance.setstate({foo: 'bar'});
}
window.unmountcomponentatnode = () => {
console.log('卸载');
unmountcomponentatnode(root);
}
使用三个按钮触发组件的装载、更新和卸载过程：
/index.html<!doctype html>
<html>
<head>
<title>react-this</title>
</head>
<body>
<button onclick="window.rendercomponent()">挂载</button>
<button onclick="window.setstate()">更新</button>
<button onclick="window.unmountcomponentatnode()">卸载</button>
<p id="root">
<!-- app -->
</p>
</body>
</html>
运行程序，依次单击“挂载”，绑定onclick={this.handler}“单击”按钮，“更新”和“卸载”按钮结果如下：
1. render()以及componentdidmount()、componentdidupdate()等其他生命周期函数中的this都是组件实例；
2. this.handler()的调用者，为render（）中的this，所以打印组件实例；
3. window.handler()的“调用者”，为window，所以打印window；
4. onclick={this.handler}的“调用者”为事件绑定，来源多样，这里打印undefined。
-面对如此混乱的场景，如果我们想在onclick中调用自定义的组件方法，并在该方法中获取组将实例，我们就得进行转换上下文即绑定上下文：
自动绑定和手动绑定
react.createclass有一个内置的魔法，可以自动绑定所用的方法，使得其this指向组件的实例化对象，但是其他javascript类并没有这种特性；
所以react团队决定不再react组件类中实现自动绑定，把上下文转换的自由权交给开发者；
所以我们通常在构造函数中绑定方法的this指向：
import react from 'react';
const str = '被调用，this指向：';
class app extends react.component{
constructor(){
super();
this.handler = this.handler.bind(this);
}
//测试函数
handler() {
console.log(`handler ${str}`,this);
}
render(){
console.log(`render ${str}`,this);
this.handler();
window.handler = this.handler;
window.handler();
return(
<p>
<h1>hello world</h1>
<label htmlfor = 'btn'>单击打印函数handler中this的指向</label>
<input id = "btn" type="button" value = '单击' onclick = {this.handler}/>
</p>
)
}
}
export default app
将this.handler()绑定为组件实例后，this.handler()中的this就指向组将实例，即onclick={this.handler}打印出来的为组件实例；
总结：
react组件生命周期函数中的this指向组件实例；
自定义组件方法的this会因调用者不同而不同；
为了在组件的自定义方法中获取组件实例，需要手动绑定this到组将实例。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
javascript模块加载器是怎么运行的
在ionic2中怎样使用自动生成器
以上就是在react组件中的this如何使用的详细内容。