Question

假设我有一个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而不是带有自定义组件的GridLayout。但是，使用自定义组件会更加方便。我可以轻松地调整组件，并且没有重复的代码。我还可以更轻松地使用ref进行动画处理（不给每个Label / Button一个唯一的名称，等等）。

我想知道第二种方法是否是最好的方法？是否可以通过自定义组件获得相同的性能？

Answer 1

使用自定义Vue组件从来都不是问题，而关乎您的设计方式和使用的布局。您可以通过两种简单的方法在此处保留性能，

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

使用自定义组件的本机脚本性能

1 个答案: