react中的this

今天被问到了一个关于react中this指向的问题,脑子里大概有一些概念,但是一时又说不太清楚,之后查了一些资料,按照自己的理解总结一下

es6的class是可以用来构建react组件的一种方式,而我们在构建组件的时候其实就是创建类,这时候我们并没办法知道this的上下文,而其后组件被调用,其实就是实例化了一个对象,这时候,组件有上下文了,我们可以开始讨论this了

 1 import React from ‘react‘
 2
 3 export default class MyComponent extends React.Component{
 4     constructor(props) {
 5         super(props)
 6         this.state = {
 7             name: ‘W‘
 8         }
 9         this.value = ‘www‘
10         this.handler1 = this.handler1.bind(this)
11     }
12     handler() {
13         console.log(this)
14     }
15     handler1() {
16         console.log(this)
17     }
18     handler2 = () => {
19         console.log(this)
20     }
21     componentDidMount() {       console.log(‘***componentDidMount***: ‘,this) 
22         console.log(‘***componentDidMount this handler***: ‘,this.handler())
23         console.log(‘***componentDidMount this handler1***: ‘,this.handler1())
24         console.log(‘***componentDidMount this handler2***: ‘,this.handler2())
25     }
26     render() {
27         console.log(‘***render this***: ‘,this)
28         console.log(‘***render this handler***: ‘,this.handler())
29         console.log(‘***render this handler1***: ‘,this.handler1())
30         console.log(‘***render this handler2***: ‘,this.handler2())
31         return (
32             <div>
33                 <button onClick={this.handler}>click me</button>
34                 <button onClick={this.handler1}>click me</button>
35                 <button onClick={this.handler2}>click me</button>
36             </div>
37         )
38     }
39 }
首先,componentDidMount() 和 render()中的this输出的是该实例对象,以此类推,我们可以测试其他生命周期,最终会发现在构造函数等一系列生命周期中,我们调用的this都是指向实例对象的

其后,我们看到这里我定义了三个函数,而对三个函数调用的时候我们也是通过this来调用的,因为上面我们已经说过,这些情况下的this指向实例对象,而函数也是定义在实例对象里的而关键的地方便是在函数内部的this,我们会发现handler函数无论是在生命周期中调用,还是在button中触发调用,this都是返回undefined。这是因为es6的class并没有帮助我们绑定函数的上下文,所以在实例化的时候,handler()的上下文其实是button了,而我们想要的效果是让其绑定在MyComponent实例上为了解决这个问题,我们必须手动来绑定,于是有了handler2,我们通过bind来将其上下文绑定到‘this’上,而这个‘this’我们之前验证过了,就是实例对象当然,除了通过bind绑定,es6给我们提供了一个新的概念:箭头函数,它最大的特征便是把函数的this绑定到其定义时所在的上下文,而从代码中我们也可知,箭头函数便是被定义在类中,实例化的时候,其上下文自然是实例对象

通过一个this,这个问题里面还有讨论到class构建组件,组件实例化,箭头函数,bind绑定,都是需要了解并且值得深入的

原文地址:https://www.cnblogs.com/waiting-h/p/8797067.html

时间: 2024-10-09 16:28:41

react中的this的相关文章

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re

react中为什么要使用immutable

因为在react中,react的生命周期中的setState()之后的shouldComponentUpdate()阶段默认返回true,所以会造成本组件和子组件的多余的render,重新生成virtual dom,并进行virtual dom diff,所以解决办法是我们在本组件或者子组件中的shouldComponentUpdate()函数中比较,当不需要render时,不render. 当state中的值是对象时,我们必须使用深拷贝和深比较! 如果不进行深拷贝后再setState,会造成t

Immutable学习及 React 中的实践

为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象.如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2.虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失.为了解决这个问题,一般的做法是使用 shallowCo

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

在react中使用intro.js的的一些经验

react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇博文关于如何在react中引入文件 2 在需要的页面引入文件后, 可以给intro.js的出发点绑定函数 showIntrojs(){ introJs().start(); } 这样intro.js就可以在页面发挥作用了~ 3 intro.js只会对整个组件起作用,并且要在组件外面添加一层父元素(d

React中key的作用

对于React中key的作用,官方没有给出详细的解读,只提到在List中需要给key赋值来区分每一条记录,http://blog.csdn.net/code_for_free/article/details/50514259里讲解了key的使用场景, http://taobaofed.org/blog/2016/08/24/react-key/从三方面讲了List组件中key存在的原因和List之外使用key作为trick简化代码逻辑,本文以List中新增元素为例,从List子组件生命周期函数的

React中,map出来的元素添加事件无法使用

在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下面加一个回复的input,input期初是隐藏的,当我点击每天评论下面的回复时,input输入框显示 这里举个例子,比如我数组里有三组文字,我把它们渲染到li中,点击每个li,alert()出每个li里面的内容,按照下面的方法,你会发觉出错,无法显示 var myTest = React.creat

在React中使用Redux

修复遗留问题 webpack.prod.config.js中缺少了对path库的引用,执行构建npm run build:prod的时候失败.在文件开始的地方引入node.js的path库就可以了. package.json里面定义了一个build:dev的脚本,这个脚本其实有点多余,不过有时候需要打包测试版本的文件,所以还是需要存在.主要有个问题是webpack.dev.config.js中output节点下错误定义了path的值为根目录'/',这在使用npm start命令启动运行时打包的时

React中的state与props的再理解

props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.其实这种说法有问题.可以参考一篇文章<React中state与props介绍与比较> 组件中的props本质作用是一种父级向子级传递数据的方式.props是可以改变的,只是没有提供API可以在子组件里直接修改,我们可以在父组件里把要给子组件的属性值修改.

Immutable 详解及 React 中实践

本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了.这些至少说明 Immutable 是很有价值的,下面我们来一探究竟.