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