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( <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指向了组件实例,而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( <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到组将实例。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- React多页面应用1
- jQuery操作Select
- MSDN杂志上的Windows Phone相关文章
- WCF Data Service工具包
- WordPress 文章截断方式:有more标签的优先more标签,否则截断一定字数
- 为什么要探索宇宙
- Redis的各项功能解决了哪些问题?
- WordPress.com 宣布支持Markdown 语言
- 使用Topshelf 5步创建Windows 服务
- TGM Plugin Activation:为WordPress 主题添加“插件推荐安装”功能
- [腾讯社区开放平台]介绍开放授权协议-OAuth
- HTML5规范的本地存储
- ASP.NET Web API 处理架构
- ASP.NET MVC 4中的单页面应用程序
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter之SliverAppBar
- OpenGL ES 环境搭建
- Asp.Net Core 程序部署到Linux(centos)生产环境(一):普通部署
- Asp.Net Core 程序部署到Linux(centos)生产环境(二):docker部署
- docker-compose 安装jenkins的正确姿势 实践笔记
- windows安装nginx注册为服务的正确姿势 并设置开机自启 实践笔记
- windows navicat连接oracle11G 自用 实践笔记
- docker安装官方redis集群并集群连接测试 的正确姿势 自用 实践笔记
- Asp.net Core 使用Jenkins + Dockor 实现持续集成、自动化部署(一):Jenkins安装
- Centos7安装轻量级TCP转发工具rinetd注册为服务的正确姿势 并设置开机自启 实践笔记 自用
- Connection open error . Connection Timeout Expired. The timeout period elapsed during the post-login
- macbook-12-2015款 安装win10系统 自用 实践笔记
- OpenGL ES 之attribute
- windows server 2012 r2 搭建文件服务器 问题记录 自用 实践笔记
- OpenGL ES 之uniform和varying