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定義屬性(方法沒問題)。。畢竟誰也不支持會不會有什么其他東東包裹了我們的組件。