React组件中的this的具体使用


Posted in Javascript onFebruary 28, 2018

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

结果如图:

React组件中的this的具体使用

可以看到,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

React组件中的this的具体使用

可以看到:

  1. render中this -> 组件实例App对象;
  2. render中this.handler() -> 组件实例App对象 ;
  3. render中window.handler() -> window对象;
  4. 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}“单击”按钮,“更新”和“卸载”按钮结果如下:

React组件中的this的具体使用

1. render()以及componentDIdMount()、componentDIdUpdate()等其他生命周期函数中的this都是组件实例;

2. this.handler()的调用者,为render()中的this,所以打印组件实例;

3. window.handler()的“调用者”,为window,所以打印window;

4. onClick={this.handler}的“调用者”为事件绑定,来源多样,这里打印undefined。

-面对如此混乱的场景,如果我们想在onClick中调用自定义的组件方法,并在该方法中获取组将实例,我们就得进行转换上下文即绑定上下文:

自动绑定和手动绑定

  1. React.createClass有一个内置的魔法,可以自动绑定所用的方法,使得其this指向组件的实例化对象,但是其他JavaScript类并没有这种特性;
  2. 所以React团队决定不再React组件类中实现自动绑定,把上下文转换的自由权交给开发者;
  3. 所以我们通常在构造函数中绑定方法的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到组将实例。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
js实现弹幕墙效果
Dec 10 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 #Javascript
Node.js中DNS模块学习总结
Feb 28 #Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 #Javascript
如何在vue中使用ts的示例代码
Feb 28 #Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 #Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 #Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 #Javascript
You might like
重置版战役片段
2020/04/09 魔兽争霸
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
简单了解Python write writelines区别
2020/02/27 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
大学四年职业生涯规划书范文
2014/01/02 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
出生医学证明样本
2014/01/17 职场文书
优秀经理事迹材料
2014/02/01 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
国庆促销活动总结
2014/08/29 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Nginx HTTP跳转至HTTPS
2022/05/15 Servers