首页 文章

使用自定义组件的Nativescript性能

提问于
浏览 次
0

假设我有一个Nativescript Vue组件，如下所示：

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

我想在表单中使用此组件10次 . 据我所知，使用这样的组件在nativescript中效率相当低 . 对于性能，最好不使用自定义vue组件，只创建一个包含一个GridLayout的组件，该组件包含上述组件10次 . 我的意思是这样的：

<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 制作动画（不给每个标签/按钮一个唯一的名称等） .

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

nativescript

1 回答

  • 0

    使用自定义Vue组件永远不是问题，但它完全取决于您的设计和使用的布局 . 有两种简单的方法可以保留这里的性能，

    • Choose right layout: 您应该考虑使用StackLayout而不是使用10行的GridLayout . 当您知道有限分区的数量时，GridLayout很好 . 当你只想一个接一个地堆叠项目时，你必须使用StackLayout .

    • Use ListView / RadListView: 您添加到屏幕的UI元素越多，主/ UI线程变得沉重并且失去响应能力 . 它不仅适用于NativeScript，甚至适用于原生应用程序 . 您必须根据需要考虑将ListView / RadListView与一个或多个项目模板一起使用 . 当您向下/向上滚动时，该组件具有自己的逻辑以重用视图（项模板） . 您不应该对此组件使用Id / Ref，因为模板将根据需要重复使用，因此更喜欢使用数据，绑定类名等，

    回复于

相关问题