【react】_state的简写方式

2023-11-11

在真实的类组件中,不会出现构造器,想把自定义的属性添加到实例对象上,在类中直接赋值即可,但切记:只有固定的值才可能这样写,如果赋的是一个变量,还是要写构造器

class Weather extends React.Component {
      // constructor(props) {
        // super(props)     
        // this.state = { isHot: false, wind: '风' }   
        // this.newWeather = this.changeWeather.bind(this)      
      // }
      state = { isHot: false, wind: '风' }    // 往weather的实例对象的state上添加属性
} 

在真实的类组件中,也无需大量的操作自定义方法的this指向,显得代码很冗余,自定义方法——用赋值语句的形式+箭头函数

class Weather extends React.Component {
      /* 
        箭头函数没有自己的this,他找其外层函数的this去作为自己的this
      */

      // 原本自定义的changeWeather方法是挂载在weather的原型对象上,但是这样用箭头函数赋值写后,changeWeather方法就挂在在weather的实例对象身上
      changeWeather = () => {
        const isHot = this.state.isHot
        this.setState({ isHot: !isHot })
        console.log(this)   // weather的实例对象
      }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【react】_state的简写方式 的相关文章

随机推荐

  • ciscn 2022 misc 部分wp

    everlasting night 提示是注意png数据块 然后注意图片通道数据可以用来lsb解码 下载是一张图片 尝试几种方法之后没有太大发现 得到提示于是看了一下stegsolve f78dcd383f1b574b 这里发现了一串可疑字
  • 90、Tensorflow实现分布式学习,多台电脑,多个GPU 异步试学习

    Created on 2017年5月28日 author weizhen import time import tensorflow as tf from tensorflow examples tutorials mnist import
  • Vue 实现左边导航栏且右边显示具体内容(element-ui)

    最终效果图 现在开始进入正题 1 安装element ui npm i element ui S CDN 目前可以通过 unpkg com element ui 获取到最新版本的资源 在页面上引入 js 和 css 文件即可开始使用
  • 探索人工智能

    前言 模型训练是指使用算法和数据对机器学习模型进行参数调整和优化的过程 模型训练一般包含以下步骤 数据收集 数据预处理 模型选择 模型训练 模型评估 超参数调优 模型部署 持续优化 文章目录 前言 数据收集 数据预处理 模型选择 模型训练
  • Tracy 小笔记 Vue - 路由

    Vue Router 路由中有一个非常重要的概念叫路由表 本质上就是一个映射表 决定了数据包的指向 服务器渲染 后端渲染 如 jsp php java 服务器直接生产渲染好对应的 html 页面 返回到客户端进行展示 这种情况下渲染好的页面
  • java实现截图功能

    java实现截图功能 java实现截图 录屏 public static void main String args throws InterruptedException 截取整个屏幕 保存在H盘下 名字为当前时间毫秒值 格式为png T
  • Unity3D-UI--Layout组件

    Layout组件 自动排版 Layout Group Vertical Layout Group 垂直布局 垂直布局组 组件将其子布局元素彼此重叠 它们的高度由各自的最小高度 首选高度和柔性高度决定 具体取决于以下模型 Vertical L
  • Activity之间的跳转的两种实现方法

    概括 在Android当中 Activity的跳转有两种方法 第一个是利用startActivity Intent intent 的方法 第二个则是利用startActivityForResult Intent intent int req
  • QT添加外部动态库

    编译完动态库 将动态库debug文件夹中的 a和 dll拷贝下来 在window中 dll 动态库 lib 静态库 在linux中 so 动态库 a 静态库 在根目录下新建include 并放入其中 同样的把头文件也放入include中 然
  • 图论基本概念

    文章目录 图 相邻 度 简单图 路径 子图 连通 无向图 有向图 本章概述了图论中的一些概念 部分内容来源于 OI Wiki 图 图 Graph 是一个由 点集 Vertex set 和 边集 Edge set 组成的二元组 常用 G V
  • 哈工大深圳计算机水平怎么样,还原一个真实的哈工大!——十问(转载)

    发信人 hiticeberg 千面怪 信区 NewExpress 标 题 还原一个真实的哈工大 十问 发信站 水木社区 Fri May 30 19 37 50 2008 站内 作为哈工大的土著 也许也是目前连续在校时间最长的哈工大学子 在毕
  • [蓝桥杯][2013年第四届真题]剪格子

    一定要好好审题啊 行号和列号跟题意要求的搞反了 结果de到怀疑人生了 这个题给的数据量不大 所以我就放心大胆的在每个中间节点里各开了一个vis标记数组 用来记录每一条广搜路径走过的节点 include
  • 微信小程序使用 scss

    一 在 vscode 中安装 easy sass 扩展 二 在微信开发者工具导入 vscode 安装的 easy sass 扩展 安装完成后会让重新加载扩展 再次打开后就可以看到扩展已经有 easy sass 了 三 修改 easy sas
  • 【雕爷学编程】MicroPython手册之 WiPy 特定端口库 wipy.machine.I2C.readfrom()

    MicroPython是为了在嵌入式系统中运行Python 3编程语言而设计的轻量级版本解释器 与常规Python相比 MicroPython解释器体积小 仅100KB左右 通过编译成二进制Executable文件运行 执行效率较高 它使用
  • 用logrotate拆分nginx日志

    被遗忘的Logrotate
  • uban服务器系统,Web服务器-并发服务器-Epoll(3.4.5)

    1 介绍 epoll是一种解决方案 nginx就是用的这个 中心思想 不要再使用多进程 多线程了 使用单进程 单线程去实现并发 在上面博客实现的代码中使用过的轮询去查看套接字有没有数据 而epoll是主动通知 当使用多进程的时候 是复制一份
  • osg学习(六十九)平移、旋转、缩放实现过程

    1 主程序 osg PositionAttitudeTransform patTransform new osg PositionAttitudeTransform patTransform gt setPosition l2wMatrix
  • SuperSocket教程八:通过服务器计划将数据推送到客户端

    前面我们知道了如何使用客户端去连接服务端 然后给服务端发送消息 根据消息的关键字服务端进行返回等等 但是那都是来自客户端的请求 我们服务端如何去主动给客户端发消息呢 这些逻辑到哪里去写呢 这里我写了一份代码供大家参考 官方文档说了 建议se
  • 视听融合综述(一)Audiovisual Fusion: Challenges and New Approaches

    分享一篇视听融合研究综述 2015年发表在Proceedings of the IEEE上 该期刊创刊于1913年 是IEEE最古老的杂志之一 主要刊登一些综述和科学前沿的调查研究 review survey and tutorial 不刊
  • 【react】_state的简写方式

    在真实的类组件中 不会出现构造器 想把自定义的属性添加到实例对象上 在类中直接赋值即可 但切记 只有固定的值才可能这样写 如果赋的是一个变量 还是要写构造器 class Weather extends React Component con