Funktionen in zustandslosen Komponenten?

Question

Ich versuche, diese coole <canvas> Animation, die ich gefunden here in eine reaktive wiederverwendbare Komponente zu konvertieren. Es sieht so aus, als würde diese Komponente eine übergeordnete Komponente für die Zeichenfläche und viele untergeordnete Komponenten für die function Ball() benötigen.

Aus Leistungsgründen wäre es wahrscheinlich besser, die Balls zu zustandslosen Komponenten zu machen, da es viele davon geben wird. Ich bin nicht so vertraut mit staatenlosen Komponenten und fragte mich, wo ich die this.update() und this.draw Funktionen definieren sollte, die in function Ball() definiert sind.

Gehen Funktionen für zustandslose Komponenten in die Komponente oder nach außen? Mit anderen Worten, welche der folgenden ist besser?

1:

const Ball = (props) => { 
    const update =() => { 
     ... 
    } 

    const draw =() => { 
     ... 
    } 

    return (
     ... 
    ); 
} 

2:

function update() { 
    ... 
} 

function draw() { 
    ... 
} 

const Ball = (props) => { 
    return (
     ... 
    ); 
} 

Was sind die Vor-/Nachteile der einzelnen und sind einer von ihnen besser für bestimmte Anwendungsfälle wie meine?

Answer 1

Das erste, was zu beachten ist, dass staatenlos funktionalen Komponenten diese Methoden nicht haben, können Sie nicht auf Aufruf update oder draw auf einer gerenderten Ball zählen sollte, wenn es sich um eine stateless funktionale Komponente ist.

In den meisten Fällen sollten Sie die Funktionen außerhalb der Komponentenfunktion deklarieren, damit Sie sie nur einmal deklarieren und immer die gleiche Referenz verwenden. Wenn Sie die Funktion im Inneren deklarieren, wird die Funktion bei jedem Rendern der Komponente erneut definiert.

Es gibt Fälle, in denen Sie innerhalb der Komponente eine Funktion definieren müssen, um z. B. eine Ereignisbehandlungsroutine zu verwenden, die sich je nach den Eigenschaften der Komponente anders verhält. Aber immer noch können Sie die Funktion außerhalb Ball definieren und mit den Eigenschaften binden, wodurch der Code viel sauberer wird und die Funktionen update oder draw wiederverwendbar macht.

// You can use update somewhere else 
const update (propX, a, b) => { ... }; 

const Ball = props => (
    <Something onClick={update.bind(null, props.x)} /> 
); 

statt:

const Ball = props => { 
    function update(a, b) { 
    // props.x is visible here 
    } 

    return (
    <Something onClick={update} /> 
); 
}