@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.pswp.cn/news/390100.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/390100.shtml
英文地址,請注明出處:http://en.pswp.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 樓層或比它低的樓層落下的雞蛋都不會破。 每次…