react-native优化-内联引用

内联引用在CSS中是把CSS样式写到HTML标签里面

<p style="font-size: 10px; color: #FFFFFF;"></p>

在react native 里面是 require 代替 import
require的作用是加载文件, 可以在需要用的地方调用。
所以在react native 中，用require 代替 import, 可以在需要该文件的时候加载改模块或文件，以达到优化页面加载速度。
总结: 内联引用并没有优化性能, 但是优化的页面加载速度. 或者说让页面加载有个优先级.

实例解释:

image.png
image.png

上面这两个是本次的‘男一、女一’
App这个类加载的日志:

App----render
GiftModel----componentWillMount
GiftModel----render
GiftModel----componentDidMount

从这个日志能看出来, 这个GiftModel在App渲染的时候也加载了, 但是在当前这个时候我们并没有用到这个GiftModel. 这个是我们不需要的.
当我们点击按钮触发 _touchModalEvent 这个方法的时候, 日志是:

App----_touchModalEvent---点击
App----render
GiftModel----render

这个是对的, 是我们要的.

但是, 怎么解决渲染App页面的时候不要也把GiftMode也一起加载了, 这个问题?

这个时候就用到了内联引用
具体操作如下:

image.png
现在把App这个类修改下, 把GiftModel由 import 换成 require, 这种动态导入的方式.
现在重新加载App这个类, 日志如下:

App----render

再点击按钮触发_touchModalEvent 这个方法的时候, 日志是:

App----_touchModalEvent---点击
App----render
GiftModel----componentWillMount
GiftModel----render
GiftModel----componentDidMount

这个时候就达到我们想要实现的样子了.
这个优化意思: 在加载一个页面的时候, 想要快速显示出来, 可以把页面分级, 按照优先级加载页面内容. 以提高加载速度.