@hot熱加載修飾器致使static靜態屬性丟失(已解決)

react開發的時候,引入熱加載,用了修飾器的引入方式,發現了一個頗有意思的問題,網上並無相關文章,因此拋出來探討下。react

clipboard.png

一段很簡單的測試代碼。可是通過babel編碼後,變得頗有意思。假設編碼成es2016,那麼會是怎樣的呢。es6

clipboard.png

由於es6支持static靜態方法,但不支持靜態屬性,致使屬性被編碼成CS.myName='kkk'
but 關鍵的地方來了。。由於咱們引入了@hot。。一切變得有意思,看看源碼它作了什麼babel

clipboard.png

hot給Component包裹了幾層,返回了一個新的component。。ide

重點來了。。。這就致使了一個頗有意思的問題。測試

babel轉碼後,咱們的靜態屬性一樣掛載到了這個新的component上,這是babel的操做,無解,它已經不是原來的component了。 這就致使咱們在裏層的component中去調用 Cs.myName等靜態屬性就會報undefined。因此儘量不使用靜態屬性,而是直接置頂用const變量代替。
不過幸虧的是,靜態方法是直接掛載到裏面(原來)的component上的。因此咱們可以正常訪問獲得,如Cs.show。編碼

但一樣會引起一個好奇,若是我轉化成es5,不支持靜態方法的話,那是否是也會致使靜態方法丟失的問題呢。。爲此我特地作了個試驗。。
噹噹噹。。。es5

忽略波浪線,是eslint報錯。。。spa

clipboard.png

發現沒。。即使是es2015。轉碼後屬性仍是外層,不過方法依然是在裏層實現的。並無掛載的外層,_createClass這個方法作了處理的eslint

clipboard.png

咱們定義的show和hide當作staticProps傳進去了。component

總結了。。雖然是引入了@hot致使的問題,但仍是儘可能不要使用static定義屬性(方法沒問題)。。畢竟誰也不支持會不會有什麼其餘東東包裹了咱們的組件。

相關文章
相關標籤/搜索