@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,一经查实,立即删除!

相关文章

学习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"&…

Spring+jpaNo transactional EntityManager available

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

01_Struts2概述及环境搭建

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

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

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

剥开比原看代码09:通过dashboard创建密钥时,前端的数据是如何传到后端的?

2019独角兽企业重金招聘Python工程师标准>>> 作者&#xff1a;freewind 比原项目仓库&#xff1a; Github地址&#xff1a;https://github.com/Bytom/bytom Gitee地址&#xff1a;https://gitee.com/BytomBlockchain/bytom 在前面一篇文章&#xff0c;我们粗略的研究…

004. ES6之函数的扩展

2019独角兽企业重金招聘Python工程师标准>>> 1. 函数参数的默认值 ES6 允许为函数的参数设置默认值&#xff0c; function log(x, y World) {console.log(x, y); }log(Hello) // Hello World log(Hello, China) // Hello China log(Hello, ) // Hello// 1. 参数变量…

一名3年工作经验的程序员应该具备的技能

本文转自:https://m.imooc.com/article/details?article_id7557 前言 因为和同事有约定再加上LZ自己也喜欢做完一件事之后进行总结&#xff0c;因此有了这篇文章。这篇文章大部分内容都是面向整个程序员群体的&#xff0c;当然因为LZ本身是做Java开发的&#xff0c;因此有一部…

多语言版希尔排序

2019独角兽企业重金招聘Python工程师标准>>> 简介 希尔排序(Shells Sort)是插入排序的一种又称“缩小增量排序”&#xff08;Diminishing Increment Sort&#xff09;&#xff0c;是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算法。该方法因D.L…

UML 中extend和include的区别

在UML用例图中有两种关系——包含和扩展&#xff0c;容易混淆&#xff0c;下面通过一张表来区别一下这两种关系。 转载于:https://www.cnblogs.com/yonyong/p/8555547.html

浏览器兼容CSS渐进增强 VS 优雅降级如何选择

由于低级浏览器不支持 CSS3&#xff0c;但是 CSS3 特效太优秀不忍放弃&#xff0c;所以在高级浏览器中使用CSS3&#xff0c;而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验&#xff0c;但是它们侧重点不同&#xff0c;所以导致了工作流程上的不同…

2018年,牛客网小白月赛5

第一次啊&#xff0c;补题&#xff0c;希望大佬批评。 题目按我补题顺序来的。 https://www.nowcoder.com/acm/contest/135#question H 题 最大公倍数 题意:给出两个数&#xff0c;求最大公倍数 欧几里德算法算出最大公约数k; 然后算出。最大公倍数即可 代码如下&#xff1a; …

爬虫笔记(十二)——浏览器伪装技术

为什么要进行浏览器伪装技术&#xff1f; 有一些网站为了避免爬虫的恶意访问&#xff0c;会设置一些反爬虫机制&#xff0c;对方服务器会对爬虫进行屏蔽。常见的饭爬虫机制主要有下面几个&#xff1a; 1. 通过分析用户请求的Headers信息进行反爬虫 2. 通过检测用户行为进行反…

《活出生命的意义》:人生有何意义?

在你一生的阅读体验中&#xff0c;如果能够有一本书&#xff0c;它的某个章节、某种思想、或者某句话能够触动你的内心&#xff0c;解决你的困惑&#xff0c;甚至能改变你的命运&#xff0c;那这样的一本书你一定要视如珍宝&#xff0c;经常翻阅&#xff0c;维克多弗兰克尔的《…

右键添加git-bash

主要&#xff1a; 右键如果没有git-bash&#xff0c;如何给右键手动添加 前面对右键存在git-bash但使用出现问题的解决&#xff0c;也想到如果右键都没有&#xff0c;该如何给右键添加了&#xff0c;于是接着记录下如何添加的过程&#xff1a; 情形&#xff1a; 手动给右键添加…

Weblogic的缓存

2019独角兽企业重金招聘Python工程师标准>>> 最近遇到一个关于weblogic缓存的问题。再把war包放入到weblogic指定目录启动以后&#xff0c;访问页面信息没有更新。最后发现是\weblogic\user_projects\domains\base_domain\servers\AdminServer下的文件没有清除&…

725. 分隔链表

725. 分隔链表 给你一个头结点为 head 的单链表和一个整数 k &#xff0c;请你设计一个算法将链表分隔为 k 个连续的部分。 每部分的长度应该尽可能的相等&#xff1a;任意两部分的长度差距不能超过 1 。这可能会导致有些部分为 null 。 这 k 个部分应该按照在链表中出现的顺…

LAMP介绍-MySQL安装

2019独角兽企业重金招聘Python工程师标准>>> LAMP: linux-apache-mysql-php &#xff08;安装方式有&#xff1a;rpm&#xff0c;源码&#xff0c;二进制免编译&#xff09; linux-操作系统 apache-web服务软件&#xff08;httpd&#xff09; mysql-存储数据库 php…

java1

不知道为啥粘贴的图片是一堆编码。。。。 如何插入图片 博客后后台MarkDown编辑器上只有一个按钮&#xff0c;就是用来上传图片并自动插入MarkDown标记的&#xff0c;超级好用 &#xff08;一&#xff09;学习总结 1.在java中通过Scanner类完成控制台的输入&#xff0c;查阅JDK…

430. 扁平化多级双向链表

430. 扁平化多级双向链表 多级双向链表中&#xff0c;除了指向下一个节点和前一个节点指针之外&#xff0c;它还有一个子链表指针&#xff0c;可能指向单独的双向链表。这些子列表也可能会有一个或多个自己的子项&#xff0c;依此类推&#xff0c;生成多级数据结构&#xff0c…

标记偏见_分析师的偏见

标记偏见“Beware of the HiPPO in the room” — The risks and dangers of top-down, intuition-based decision making are well known in the business world. Experimentation and data-based decision making become widely acknowledged as the right way to steer a bu…