@hot热加载修饰器导致static静态属性丢失(已解决)

react开发的时候,引入热加载,用了修饰器的引入方式,发现了一个很有意思的问题,网上并没有相关文章,所以抛出来探讨下。

clipboard.png

一段很简单的测试代码。但是经过babel编码后,变得很有意思。假设编码成es2016,那么会是怎样的呢。

clipboard.png

因为es6支持static静态方法,但不支持静态属性,导致属性被编码成CS.myName='kkk'
but 关键的地方来了。。因为我们引入了@hot。。一切变得有意思,看看源码它做了什么

clipboard.png

hot给Component包裹了几层,返回了一个新的component。。

重点来了。。。这就导致了一个很有意思的问题。

babel转码后,我们的静态属性同样挂载到了这个新的component上,这是babel的操作,无解,它已经不是原来的component了。 这就导致我们在里层的component中去调用 Cs.myName等静态属性就会报undefined。所以尽可能不使用静态属性,而是直接置顶用const变量代替。
不过幸好的是,静态方法是直接挂载到里面(原来)的component上的。所以我们能够正常访问得到,如Cs.show。

但同样会引发一个好奇,如果我转化成es5,不支持静态方法的话,那是不是也会导致静态方法丢失的问题呢。。为此我特意做了个试验。。
当当当。。。

忽略波浪线,是eslint报错。。。

clipboard.png

发现没。。即便是es2015。转码后属性还是外层,不过方法依然是在里层实现的。并没有挂载的外层,_createClass这个方法做了处理的

clipboard.png

我们定义的show和hide当做staticProps传进去了。

总结了。。虽然是引入了@hot导致的问题,但还是尽量不要使用static定义属性(方法没问题)。。毕竟谁也不支持会不会有什么其他东东包裹了我们的组件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/390100.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

49. 字母异位词分组

49. 字母异位词分组 给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的字母得到的一个新单词,所有源单词中的字母都恰好只用一次。 示例 1: 输入: strs [“eat”, “tea”, “tan”…

python 入门程序_非Python程序员的Python速成课程-如何快速入门

python 入门程序This article is for people who already have experience in programming and want to learn Python quickly.本文适用于已经有编程经验并希望快速学习Python的人们。 I created this resource out of frustration when I couldnt find an online course or a…

cmd命令操作Oracle数据库

//注意cmd命令执行的密码字符不能过于复杂 不能带有特殊符号 以免执行不通过 譬如有!#¥%……&*之类的 所以在Oracle数据库设置密码是不要太复杂 /String Database "ORCL"; 不指向地址程序只能安装在数据库服务器上才能执行到命令String …

OpenCV学习(7.16)

写了个实现摄像头上画线并输出角度的东西……虽然很简单,但脑残的我还是debug了很长时间。 1 // 圆和直线.cpp : 定义控制台应用程序的入口点。2 //3 4 #include "stdafx.h"5 6 using namespace std;7 using namespace cv;8 9 void onMouse(int event, in…

学习vue.js的自我梳理笔记

基本语法格式&#xff1a; <script> new Vue({ el: #app, data: { url: http://www.runoob.com } }) </script> 指令 【指令是带有 v- 前缀的特殊属性。】 判断 <p v-if"seen">现在你看到我了</p> 参数 <a v-bind:href"url"&…

722. 删除注释

722. 删除注释 给一个 C 程序&#xff0c;删除程序中的注释。这个程序source是一个数组&#xff0c;其中source[i]表示第i行源码。 这表示每行源码由\n分隔。 在 C 中有两种注释风格&#xff0c;行内注释和块注释。 字符串// 表示行注释&#xff0c;表示//和其右侧的其余字符…

如何创建一个自记录的Makefile

My new favorite way to completely underuse a Makefile? Creating personalized, per-project repository workflow command aliases that you can check in.我最喜欢的完全没用Makefile的方法&#xff1f; 创建个性化的按项目存储库工作流命令别名&#xff0c;您可以检入。…

【BZOJ3262】陌上花开

CDQ分治模板 注意三元组完全相等的情况 1 #include<bits/stdc.h>2 using namespace std;3 const int N100010,K200010;4 int n,k,cnt[N],ans[N];5 struct Node{6 int a,b,c,id;7 bool operator<(const Node& k)const{8 if(bk.b&&ck.c) re…

Spring+jpaNo transactional EntityManager available

2019独角兽企业重金招聘Python工程师标准>>> TransactionRequiredException: No transactional EntityManager availableEntityManager执行以下方法(refresh, persist, flush, joinTransaction, remove, merge) 都需要需要事务if (transactionRequiringMethods.cont…

python项目构建_通过构建4个项目来学习Python网络

python项目构建The Python programming language is very capable when it comes to networking. Weve released a crash course on the freeCodeCamp.org YouTube channel that will help you learn the basics of networking in Python.当涉及到网络时&#xff0c;Python编程…

164. 最大间距

164. 最大间距 给定一个无序的数组&#xff0c;找出数组在排序之后&#xff0c;相邻元素之间最大的差值。 如果数组元素个数小于 2&#xff0c;则返回 0。 示例 1: 输入: [3,6,9,1] 输出: 3 解释: 排序后的数组是 [1,3,6,9], 其中相邻元素 (3,6) 和 (6,9) 之间都存在最大差…

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 screen工具

通过后台服务的方式在远程主机上建立一个rsync的服务器&#xff0c;在服务器上配置好rsync的各种应用&#xff0c;然后将本机作为rsync的一个客户端连接远程的rsync服务器。在128主机上建立并配置rsync的配置文件/etc/rsyncd.conf,把你的rsyncd.conf编辑成以下内容&#xff1a;…

01_Struts2概述及环境搭建

1.Struts2概述&#xff1a;Struts2是一个用来开发MVC应用程序的框架。Struts2提供了web应用程序开发过程中一些常见问题的解决方案;对用户输入的数据进行合法性验证统一的布局可扩展性国际化和本地化支持Ajax表单的重复提交文件的上传和下载... ...2.Struts2相对于Struts1的优势…

315. 计算右侧小于当前元素的个数

315. 计算右侧小于当前元素的个数 给定一个整数数组 nums&#xff0c;按要求返回一个新数组 counts。数组 counts 有该性质&#xff1a; counts[i] 的值是 nums[i] 右侧小于 nums[i] 的元素的数量。 示例&#xff1a; 输入&#xff1a;nums [5,2,6,1] 输出&#xff1a;[2,1…

IOS上传文件给java服务器,返回报错unacceptable context-type:text/plain

IOS上传文件给java服务器&#xff0c;返回报错unacceptable context-type&#xff1a;text/plain response返回类型不对 RequestMapping(value "uploadMultiFiles", method RequestMethod.POST, produces"application/json;charsetUTF-8") 使用produces指…

Python爬虫框架Scrapy学习笔记原创

字号scrapy [TOC] 开始 scrapy安装 首先手动安装windows版本的Twisted https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted pip install Twisted-18.4.0-cp36-cp36m-win_amd64.whl 安装scrapy pip install -i https://pypi.douban.com/simple/ scrapy windows系统额外需要…

600. 不含连续1的非负整数

600. 不含连续1的非负整数 给定一个正整数 n&#xff0c;找出小于或等于 n 的非负整数中&#xff0c;其二进制表示不包含 连续的1 的个数。 示例 1:输入: 5 输出: 5 解释: 下面是带有相应二进制表示的非负整数< 5&#xff1a; 0 : 0 1 : 1 2 : 10 3 : 11 4 : 100 5 : 101…

高可用性、负载均衡的mysql集群解决方案

2019独角兽企业重金招聘Python工程师标准>>> 一、为什么需要mysql集群&#xff1f; 一个庞大的分布式系统的性能瓶颈中&#xff0c;最脆弱的就是连接。连接有两个&#xff0c;一个是客户端与后端的连接&#xff0c;另一个是后端与数据库的连接。简单如图下两个蓝色框…

Django的model查询操作 与 查询性能优化

Django的model查询操作 与 查询性能优化 1 如何 在做ORM查询时 查看SQl的执行情况 (1) 最底层的 django.db.connection 在 django shell 中使用 python manage.py shell>>> from django.db import connection >>> Books.objects.all() >>> connect…

887. 鸡蛋掉落

887. 鸡蛋掉落 给你 k 枚相同的鸡蛋&#xff0c;并可以使用一栋从第 1 层到第 n 层共有 n 层楼的建筑。 已知存在楼层 f &#xff0c;满足 0 < f < n &#xff0c;任何从 高于 f 的楼层落下的鸡蛋都会碎&#xff0c;从 f 楼层或比它低的楼层落下的鸡蛋都不会破。 每次…