react项目中this指向问题(两种处理方法)

第一种;绑定this;

//处理this.state为undefind的问题!

componentDidMount(){

setInterval(function(){

letvalue1=this.state.value+10;

if(value1>100){return false}

this.setState({

value:value1

})

}.bind(this),100)

}

第二种:使用箭头函数;

componentDidMount(){

setInterval(()=>{

/* “箭头函数”;是一个简写的函数表达式;拥用有词法作用域的this;此外,箭头函数总是匿名的。

(词法作用域就是一个变量的作用在定义的时候就已经被定义好了;当在本作用域中找不到变量;就会

一直想父作用域中查找,直到找到为止;

箭头函数的this继承外围的作用域;

* */

letvalue1=this.state.value+10;

if(value1>100){return false}

this.setState({

value:value1

})

},100)

}

/*

(一)箭头函数的特性;

(1):箭头函数一般为匿名函数;不能使用new,创建实例;没有anguments属性;

(2):没有原型;

(二)箭头函数产生的目的;

与父元素共享关键字this;

* */

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 异步编程中的.bind(this)方法解决了异步执行后this指针指向全局函数的问题,主要可以通过以下两个场景加以...
    赵思温阅读 9,295评论 1 2
  • 1. this之谜 在JavaScript中,this是当前执行函数的上下文。因为JavaScript有4种不同的...
    百里少龙阅读 4,617评论 0 3
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 5,656评论 0 5
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 12,305评论 14 128
  • 现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一...
    sakura_L阅读 3,142评论 0 0