资讯专栏INFORMATION COLUMN

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

JasonZhang / 1740人阅读

摘要:转码后,我们的静态属性同样挂载到了这个新的上,这是的操作,无解,它已经不是原来的了。这就导致我们在里层的中去调用等静态属性就会报。所以尽可能不使用静态属性,而是直接置顶用变量代替。

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

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

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

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

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

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

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

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96227.html

相关文章

  • 虚拟机类加载机制

    摘要:虚拟机为了保证一个类的方法在多线程环境中被正确地加锁同步。但启动类加载器不可能认识这些代码。实现模块化热部署的关键则是它的自定义类加载器机制的实现。 概念区分:加载、类加载、类加载器 类加载是一个过程。 加载(Loading)是类加载这一个过程的阶段。 类加载器是ClassLoader类或其子类。 本文中的类的描述都包括了类和接口的可能性,因为每个Class文件都有可能代表J...

    airborne007 评论0 收藏0
  • 一份关于webpack2和模块打包的新手指南

    摘要:使用让从打包文件中删除未使用的导出项以减少文件大小。最后,用以下内容替换的部分在命令行中运行将以监视模式启动,当目录中的文件更改时,它将重新编译。这种转换涉及三个单独的加载器和库在配置文件中为文件添加新规则。 webpack已成为现代Web开发中最重要的工具之一。它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片。它可以让你...

    tianren124 评论0 收藏0
  • WEBPACK 入门

    摘要:入门什么是官网介绍是一个模块打包器。处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。。我们在当前项目根目录下新建一个文件,为命令配置选项。引入生成的在浏览器中打开。我们刷新页面,可以发现页面发生了变化。 webpack 入门 1. 什么是webpack 官网介绍:webpack是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。(web...

    mikasa 评论0 收藏0
  • 类的加载机制,双亲委派模型,搞定大厂高频面试题

    摘要:验证验证是连接阶段的第一步,这一阶段的目的是为了确保文件的字节流中包含的信息符合当前虚拟机的要求,并且不会危害虚拟机自身的安全。字节码验证通过数据流和控制流分析,确定程序语义是合法的符合逻辑的。 看过这篇文章,大厂面试你「双亲委派模型」,硬气的说一句,你怕啥? 读该文章姿势 打开手头的 IDE,按照文章内容及思路进行代码跟踪与思考 手头没有 IDE,先收藏,回头看 (万一哪次面试问...

    Object 评论0 收藏0
  • 深入理解虚拟机之虚拟机类加载机制

    摘要:最终形成可以被虚拟机最直接使用的类型的过程就是虚拟机的类加载机制。即重写一个类加载器的方法验证验证是连接阶段的第一步,这一阶段的目的是为了确保文件的字节流中包含的信息符合当前虚拟机的要求,并且不会危害虚拟机自身的安全。 《深入理解Java虚拟机:JVM高级特性与最佳实践(第二版》读书笔记与常见相关面试题总结 本节常见面试题(推荐带着问题阅读,问题答案在文中都有提到): 简单说说类加载过...

    MadPecker 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<