使用自定义组件的 Nativescript 性能

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 而不是 11 个带有自定义组件的。不过，使用自定义组件会方便得多。 我可以轻松地调整组件并且没有重复的代码。我还可以更轻松地使用ref 制作动画（不给每个标签/按钮一个唯一的名称等）。

如果您想要更好的性能，我想知道第二种方法是否是最好的方法？有没有办法使用自定义组件实现相同的性能？

Answer 1

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

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