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(

单击打印函数handler中this的指向

)

}

}

export default App

结果如图：

可以看到，render函数中的this指向了组件实例，而handler（）函数中的this则为undefined，这是为何？

javascript函数中的this

我们都知道javaScript函数中的this不是在函数声明的时候定义的，而是在函数调用（即运行）的时候定义的

var student = {

func: function() {

console.log(this);

};

};

student.funAOebSWTIc();

var studentFunc = student.func;

studentFunc();

这段代码运行，可以看到studenthttp://.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(

单击打印函数handler中this的指向

)

}

}

export default App

可以看到：

render中this -> 组件实例App对象；

render中this.handler() -> AOebSWTI组件实例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(,root);

window.renderComponent = () => {

console.log("挂载");

instance = render(,root);

}

window.setState = () => {

console.log("更新");

instance.setState({foo: 'bar'});

}

window.unmountComponentAtNode = () => {

console.log('卸载');

unmountComponentAtNode(root);

}

使用三个按钮触发组件的装载、更新和卸载过程：

/index.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(

单击打印函数handler中this的指向

)

}

}

export default App

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

总结：

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。