React组件中的this的具体使用

来源：动视网责编：小采时间：2020-11-27 22:18:24

React组件中的this的具体使用

React组件中的this的具体使用:React组件的this是什么通过编写一个简单组件，并渲染出来，分别打印出自定义函数和render中的this： import React from 'react'; const STR = '被调用，this指向：'; class App extends React.Component{ constructo

推荐度：

点击下载本文 文档为doc格式

导读React组件中的this的具体使用:React组件的this是什么通过编写一个简单组件，并渲染出来，分别打印出自定义函数和render中的this： import React from 'react'; const STR = '被调用，this指向：'; class App extends React.Component{ constructo

 //测试函数
 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

可以看到：

render中this -> 组件实例App对象；
render中this.handler() -> 组件实例App对象 ;
render中window.handler() -> window对象；
onClick ={this.handler} -> undefined

继续使用事件触发组件的装载、更新和卸载过程：

/index.js

import 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>
 <div id="root">
 <!-- app -->
 </div>
</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(
 <div>
 <h1>hello World</h1>
 <label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
 <input id = "btn" type="button" value = '单击' onClick = {this.handler}/>
 </div> 
 )
 }
}
export default App

将this.handler()绑定为组件实例后，this.handler()中的this就指向组将实例，即onClick={this.handler}打印出来的为组件实例；

总结：

React组件生命周期函数中的this指向组件实例；

自定义组件方法的this会因调用者不同而不同；

为了在组件的自定义方法中获取组件实例，需要手动绑定this到组将实例。