具有自定义组件的Nativescript性能

Question

假设我有一个Nativescript Vue组件，它看起来像这样：

<template>
<GridLayout columns="auto, auto">
<TextField col="0" />
<Button col="1" />
</GridLayout>
</template>

例如，我想在一个表单中使用这个组件10次。据我所知，这样使用这个组件在原生描述中效率相当低。为了提高性能，最好不要使用自定义的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个带有自定义组件的GridLayout。不过，使用自定义组件会方便得多。我可以很容易地调整组件，并且没有重复的代码。我也可以更容易地用ref制作动画(不给每个标签/按钮一个唯一的名称等(

我想知道如果你想要更好的性能，第二种方法是否是最好的方法？有没有一种方法可以通过自定义组件获得相同的性能？

Answer 1

使用自定义Vue组件从来都不是问题，但这一切都取决于您的设计方式和使用的布局。有两种简单的方法可以在这里保持性能，

1. 选择正确的布局：与其使用10行的GridLayout，不如考虑使用StackLayout。当您有已知数量的有限分区时，GridLayout是很好的。当你只想一个接一个地堆叠项目时，你必须使用StackLayout
2. 使用ListView/RadListView:添加到屏幕的UI元素越多，主/UI线程就会变得沉重并失去响应能力。它不仅与NativeScript有关，甚至与本机应用程序有关。您必须考虑根据需要将ListView/RadListView与一个或多个项模板一起使用。组件有自己的逻辑，可以在向下/向上滚动时重用视图(项目模板(。您不应该将Id/Ref与该组件一起使用，因为模板将根据需要重复使用，所以更喜欢使用数据、绑定类名等