內(nèi)聯(lián)引用在CSS中是把CSS樣式寫到HTML標簽里面
<p style="font-size: 10px; color: #FFFFFF;"></p>
在react native 里面是 require 代替 import
require的作用是加載文件, 可以在需要用的地方調(diào)用。
所以在react native 中，用require 代替 import, 可以在需要該文件的時候加載改模塊或文件午绳，以達到優(yōu)化頁面加載速度。
總結(jié): 內(nèi)聯(lián)引用并沒有優(yōu)化性能, 但是優(yōu)化的頁面加載速度. 或者說讓頁面加載有個優(yōu)先級.
實例解釋:
image.png
image.png
上面這兩個是本次的‘男一待逞、女一’
App這個類加載的日志:
App----render
GiftModel----componentWillMount
GiftModel----render
GiftModel----componentDidMount
從這個日志能看出來, 這個GiftModel在App渲染的時候也加載了, 但是在當前這個時候我們并沒有用到這個GiftModel. 這個是我們不需要的.
當我們點擊按鈕觸發(fā) _touchModalEvent 這個方法的時候, 日志是:
App----_touchModalEvent---點擊
App----render
GiftModel----render
這個是對的, 是我們要的.
但是, 怎么解決渲染App頁面的時候不要也把GiftMode也一起加載了, 這個問題?
這個時候就用到了內(nèi)聯(lián)引用
具體操作如下:
image.png
現(xiàn)在把App這個類修改下, 把GiftModel由 import 換成 require, 這種動態(tài)導入的方式.
現(xiàn)在重新加載App這個類, 日志如下:
App----render
再點擊按鈕觸發(fā)_touchModalEvent 這個方法的時候, 日志是:
App----_touchModalEvent---點擊
App----render
GiftModel----componentWillMount
GiftModel----render
GiftModel----componentDidMount
這個時候就達到我們想要實現(xiàn)的樣子了.
這個優(yōu)化意思: 在加載一個頁面的時候, 想要快速顯示出來, 可以把頁面分級, 按照優(yōu)先級加載頁面內(nèi)容. 以提高加載速度.
