react開發(fā)的時(shí)候，引入熱加載，用了修飾器的引入方式，發(fā)現(xiàn)了一個(gè)很有意思的問題，網(wǎng)上并沒有相關(guān)文章，所以拋出來探討下。

一段很簡單的測試代碼。但是經(jīng)過babel編碼后，變得很有意思。假設(shè)編碼成es2016，那么會(huì)是怎樣的呢。

因?yàn)閑s6支持static靜態(tài)方法，但不支持靜態(tài)屬性，導(dǎo)致屬性被編碼成CS.myName='kkk'
but 關(guān)鍵的地方來了。。因?yàn)槲覀円肓?#64;hot。。一切變得有意思，看看源碼它做了什么

hot給Component包裹了幾層，返回了一個(gè)新的component。。

重點(diǎn)來了。。。這就導(dǎo)致了一個(gè)很有意思的問題。

babel轉(zhuǎn)碼后，我們的靜態(tài)屬性同樣掛載到了這個(gè)新的component上，這是babel的操作，無解，它已經(jīng)不是原來的component了。 這就導(dǎo)致我們?cè)诶飳拥腸omponent中去調(diào)用 Cs.myName等靜態(tài)屬性就會(huì)報(bào)undefined。所以盡可能不使用靜態(tài)屬性，而是直接置頂用const變量代替。
不過幸好的是，靜態(tài)方法是直接掛載到里面（原來）的component上的。所以我們能夠正常訪問得到，如Cs.show。

但同樣會(huì)引發(fā)一個(gè)好奇，如果我轉(zhuǎn)化成es5,不支持靜態(tài)方法的話，那是不是也會(huì)導(dǎo)致靜態(tài)方法丟失的問題呢。。為此我特意做了個(gè)試驗(yàn)。。
當(dāng)當(dāng)當(dāng)。。。

忽略波浪線，是eslint報(bào)錯(cuò)。。。

發(fā)現(xiàn)沒。。即便是es2015。轉(zhuǎn)碼后屬性還是外層，不過方法依然是在里層實(shí)現(xiàn)的。并沒有掛載的外層，_createClass這個(gè)方法做了處理的

我們定義的show和hide當(dāng)做staticProps傳進(jìn)去了。

總結(jié)了。。雖然是引入了@hot導(dǎo)致的問題，但還是盡量不要使用static定義屬性（方法沒問題）。。畢竟誰也不支持會(huì)不會(huì)有什么其他東東包裹了我們的組件。

總結(jié)

以上是生活随笔為你收集整理的@hot热加载修饰器导致static静态属性丢失（已解决）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。