当前位置: 首页 > news >正文

React: 深入类中this对象的理解

简单组件&复杂组件定义

如果这个组件包含state状态,则为复杂组件,反之则为简单组件。

有状态组件的基础语法:

放在构造函数constructor里面,加一个状态state属性。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

关于this指向理解

其实,在函数式组件里面,this也是undefined。在class类中的render函数中this是指向的是组件实例。在类外面定义的函数,this指向的是undefined。

问题:class类中这样定义方法的时候,方法中的this指向什么?---答案是undefined

为什么?因为抛开react的所有概念,在ES6中的类中定义方法的时候,如果这个方法是通过实例调用,此时方法中的this指向这个类的实例对象,否则则为undefined,同时类中的方法也是定义在类的原型对象上,且开启了局部的严格模式(use strict)

 再举个普通的类的例子来进一步了解这个this的指向,如下图:

React如何解决类中定义直接定义方法的this指向问题?

首先明确一个概念:构造器中的this本身就是指向实例对象的。通过bind函数绑定了this,然后返回一个新的函数changeWeather,将这个新的函数作为一个值,赋值到了实例对象中的changeWeather属性中。

 

 

 

 

相关文章:

  • React: state和setState理解
  • React: 函数式组件如何使用props
  • VSCode在代码处显示提交记录
  • 如何去除谷歌的人机身份验证
  • git修改用户名及邮箱
  • git撤销commit 并保存之前的修改
  • git merge和git rebase区别
  • git rebase实战操作
  • mac系统如何更改用户名及头像
  • internal/modules/cjs/loader.js:883 throw err;
  • Node: 001全局对象和模块化-如何给node传递参数?
  • Node: mysql学习笔记001
  • Node: MySQL学习笔记002
  • yarn错误The engine “node“ is incompatible with this module
  • Node: 001全局对象和模块化-常见的全局对象
  • [译]Python中的类属性与实例属性的区别
  • 【React系列】如何构建React应用程序
  • 【译】理解JavaScript:new 关键字
  • es6要点
  • JavaScript函数式编程(一)
  • JavaScript中的对象个人分享
  • Java反射-动态类加载和重新加载
  • MySQL-事务管理(基础)
  • Sass Day-01
  • vue2.0一起在懵逼的海洋里越陷越深(四)
  • win10下安装mysql5.7
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 巧用 TypeScript (一)
  • 入口文件开始,分析Vue源码实现
  • 实现菜单下拉伸展折叠效果demo
  • 使用common-codec进行md5加密
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 运行时添加log4j2的appender
  • kubernetes资源对象--ingress
  • 第二十章:异步和文件I/O.(二十三)
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • $(function(){})与(function($){....})(jQuery)的区别
  • (12)Hive调优——count distinct去重优化
  • (14)目标检测_SSD训练代码基于pytorch搭建代码
  • (AngularJS)Angular 控制器之间通信初探
  • (Matalb回归预测)PSO-BP粒子群算法优化BP神经网络的多维回归预测
  • (二)【Jmeter】专栏实战项目靶场drupal部署
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (转)iOS字体
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (自用)learnOpenGL学习总结-高级OpenGL-抗锯齿
  • ***通过什么方式***网吧
  • .NET基础篇——反射的奥妙
  • .net连接MySQL的方法
  • [2013AAA]On a fractional nonlinear hyperbolic equation arising from relative theory
  • [20190416]完善shared latch测试脚本2.txt