自定义组件的原生脚本性能
自定义组件的原生脚本性能
提问于 2018-12-09 17:34:06
假设我有一个Nativescript Vue组件，如下所示：
<template>
<GridLayout columns="auto, auto">
<TextField col="0" />
<Button col="1" />
</GridLayout>
</template>例如，我想在一个表单中使用这个组件10次。据我所知，在nativescript中使用这样的组件是相当低效的。为了提高性能，最好不要使用自定义vue组件，而是只使用一个包含上述组件10次的GridLayout创建一个组件。我的意思是这样的：
<template>
<GridLayout rows="10" columns="auto, auto">
<TextField row="0" col="0" />
<Button row="0" col="1" />
<TextField row="1" col="0" />
<Button row="1" col="1" />
...
</GridLayout>
</template>对于自定义组件，它将如下所示：
<template>
<GridLayout rows="10" columns="auto, auto">
<CustomComponent row="0" />
<CustomComponent row="1" />
...
</GridLayout>
</template>这将转化为：
<template>
<GridLayout rows="10" columns="auto, auto">
<GridLayout row="0" columns="auto, auto">
<TextField col="0" />
<Button col="1" />
</GridLayout>
<GridLayout row="1" columns="auto, auto">
<TextField col="0" />
<Button col="1" />
</GridLayout>
...
</GridLayout>
</template>在本例中，定制组件只有一个GridLayout，而不是11个。不过，使用自定义组件会方便得多。我可以很容易地调整组件，并且没有重复的代码。我也可以更容易地用ref制作动画(不需要给每个标签/按钮一个唯一的名字，等等)。
我想知道如果你想要更好的性能，第二种方法是不是最好的？有没有办法用自定义组件实现同样的性能？
回答 1
Stack Overflow用户
发布于 2018-12-09 17:53:21
使用定制的Vue组件从来都不是问题，但最重要的是你的设计和你使用的布局。有两种简单的方法可以在这里保持性能，
- Choose right layout:与使用10行的GridLayout相比，您应该考虑使用StackLayout。当您知道有限分区的数量时，GridLayout是很好的。当你只想一个接一个地堆叠项目时，你必须使用StackLayout.
- Use ListView / RadListView:添加到屏幕上的UI元素越多，主/UI线程就会变得繁重并失去响应性。不仅仅是NativeScript，甚至是原生应用也是如此。根据需要，您必须考虑将ListView / RadListView与一个或多个项目模板一起使用。当您向下/向上滚动时，组件有其自己的逻辑来重用视图(项模板)。您不应该在此组件中使用Id / Ref，因为模板将在需要时重用，因此更喜欢使用数据、绑定类名等，
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53690990
复制相关文章
相似问题
腾讯云开发者
