Zustandlose funktionale Komponenten für High-Density UIs

Snippet

Zustandlose funktionale Komponenten für High-Density UIs

In Vue 3 sind funktionale Komponenten einfache Funktionen, die VNodes zurückgeben. Da sie keine interne Instanz besitzen (kein 'this'), sind sie extrem leichtgewichtig und schnell. Dies ist das optimale Muster für 'Blatt'-Knoten in großen Listen oder Datentabellen, bei denen das Erstellen tausender vollständiger Komponenteninstanzen die Leistung beeinträchtigen würde.

snippet.js
javascript
import { h } from 'vue';
 
const RenderItem = (props, { slots }) => {
  return h('div', { class: 'item-wrapper', onClick: props.onItemClick }, [
    h('span', { class: 'label' }, props.label),
    slots.default?.()
  ]);
};
 
RenderItem.props = ['label', 'onItemClick'];
 
export default RenderItem;

vue

Erklärung

const RenderItem = (props, { slots }) => {

Eine reine Funktion, die Props und Kontext empfängt und die Standard-Komponenteninitialisierung umgeht.

return h('div', ...);

Verwendet die Hyperscript-Funktion, um die virtuelle DOM-Struktur manuell zu definieren.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek