Производительность Nativescript с использованием пользовательских компонентов

Question

Допустим, у меня есть компонент 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>

В этомcase у меня только один GridLayout вместо 11 с пользовательским компонентом.Использование пользовательского компонента было бы намного удобнее, хотя.Я мог бы легко настроить компонент и не иметь дублирующегося кода.Я также могу проще создавать анимацию с ref (не назначая каждой метке / кнопке уникальное имя и т.Есть ли способ добиться такой же производительности с помощью пользовательских компонентов?

Answer 1

Использование пользовательских компонентов Vue никогда не является проблемой, но все зависит от вашего дизайна и используемых макетов.Здесь можно сохранить производительность двумя способами:

1. . Выберите правильный макет: Вместо использования GridLayout с 10 строками, вы должны рассмотреть возможность использования StackLayout.GridLayout хорош, когда вы знаете количество ограниченных разделов.Если вы просто хотите сложить элементы один за другим, вы должны использовать StackLayout.
2. Использовать ListView / RadListView: Чем больше элементов пользовательского интерфейса вы добавляете на экран, тем больше становится поток основного / пользовательского интерфейса итеряет отзывчивость.Это не только с NativeScript, но даже с нативными приложениями.При необходимости вы должны рассмотреть возможность использования ListView / RadListView с одним или несколькими шаблонами элементов.Компонент имеет собственную логику для повторного использования представлений (шаблонов элементов) при прокрутке вниз / вверх.Вы не должны использовать Id / Ref с этим компонентом, так как шаблоны будут использоваться повторно по мере необходимости, поэтому предпочитайте играть с данными, связывать имена классов и т. Д.,