美文网首页工具癖web开发
react 学习(三) - this指向

react 学习(三) - this指向

作者: 1994陈 | 来源:发表于2018-09-18 15:25 被阅读39次

通过API实现,this不会丢失。
如果用组合方式创建es6的类,继承了Component,this会丢失。如此,我们需要修正this的指向,以下操作皆为修正this指向,会有三种方法。如果有更好的方法推荐,可以在留言区告知共同学习!

  1. bind
    this在render函数里指向是对的,但是在方法被调用的时候this会丢失,所以在方法中调用bind来更改this指向,实例如下:


    image.png

2.()=>{} : 通过匿名函数箭头函数改变this指向


image.png

3.构造器:一个类最先运行的是构造器,在构造器中this是绝对正确的,构造器的权重比较高,


image.png

相关文章

  • react 学习(三) - this指向

    通过API实现,this不会丢失。如果用组合方式创建es6的类,继承了Component,this会丢失。如此,我...

  • React this 指向问题

    React this 指向问题 在 Class 里面使用, this.setState()报错: Cannot r...

  • react: React.forwardRef

    关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。 一、React...

  • React开发之入门

    React开发之入门 A. 创建对象时:new, B.this 指向属性、指向函数方法 C.Constructor...

  • react中this指向问题

    一.不对this指向做任何改变 class Btn extends React.Component{ rend...

  • React 中 this指向问题

    在写react mobx的demo时,给checkbox 添加一个onChange事件,并且忘记在construc...

  • react学习三

    生命周期 页面初始化 constructor componentWillMount(待废弃,用UNSAFE_前缀)...

  • 番外篇1--React组件中this

    学习react过程中遇到了this指向的问题,bind方法的理解在bind的那篇文章有提到,也得好好理解,先主要理...

  • this指向以及react中绑定this

    JavaScript函数中的this 我们都知道JavaScript函数中的this不是在函数声明的时候定义的,而...

  • 浅谈react 中的 this 指向

    前言 最近在做一个项目的时候 关于class方法中 this 指向以及 外置prototype 的 this 指向...

网友评论

    本文标题:react 学习(三) - this指向

    本文链接:https://www.haomeiwen.com/subject/rtqpnftx.html