this怎么在React组件中使用-创新互联
今天就跟大家聊聊有关this怎么在React组件中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、武宁网站维护、网站推广。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() } } export default Apphello World
结果如图:
可以看到,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() } } export default Apphello World
可以看到:
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(,root); window.renderComponent = () => { console.log("挂载"); instance = render( ,root); } window.setState = () => { console.log("更新"); instance.setState({foo: 'bar'}); } window.unmountComponentAtNode = () => { console.log('卸载'); unmountComponentAtNode(root); }
使用三个按钮触发组件的装载、更新和卸载过程:
/index.html
react-this
运行程序,依次单击“挂载”,绑定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() } } export default Apphello World
将this.handler()绑定为组件实例后,this.handler()中的this就指向组将实例,即onClick={this.handler}打印出来的为组件实例;
看完上述内容,你们对this怎么在React组件中使用有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联成都网站设计公司行业资讯频道,感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:this怎么在React组件中使用-创新互联
本文链接:http://pwwzsj.com/article/csidgj.html