Wohin sollen Funktionen in Funktionskomponenten gehen?

Lesezeit: 7 Minuten

Wohin sollen Funktionen in Funktionskomponenten gehen
MarkenCode

Ich versuche das cool zu konvertieren <canvas> Animation, die ich gefunden habe Hier in eine wiederverwendbare React-Komponente. Es sieht so aus, als würde diese Komponente eine übergeordnete Komponente für den Canvas erfordern und viele untergeordnete Komponenten für die function Ball().

Aus Leistungsgründen wäre es wahrscheinlich besser, die Balls in zustandslose Komponenten, da es viele von ihnen geben wird. Ich bin nicht so vertraut mit der Erstellung zustandsloser Komponenten und habe mich gefragt, wo ich die definieren soll this.update() und this.draw Funktionen definiert in function Ball().

Gehen Funktionen für zustandslose Komponenten innerhalb der Komponente oder außerhalb? Mit anderen Worten, was ist besser?

1:

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

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

    return (
       ...
    );
}

2:

function update() {
     ...
}

function draw() {
     ...
}

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

Was sind die Vor- und Nachteile der einzelnen und ist einer davon besser für bestimmte Anwendungsfälle wie meinen?

  • Können Sie den vorhandenen Code posten, damit wir sehen, wie er verwendet wird?

    – Scimonster

    10. September ’17 um 7:31

  • @Scimonster Ich habe es in einem eingebetteten Link gepostet, vielleicht hast du es verpasst. Hier ist der Link: codepen.io/awendland/pen/XJExGv

    – MarkenCode

    10. September ’17 um 7:32

1641737376 786 Wohin sollen Funktionen in Funktionskomponenten gehen
Marco Scabbiolo

Das erste, was zu beachten ist, ist, dass zustandslose Funktionskomponenten keine Methoden haben können. Sie sollten sich nicht darauf verlassen, dass sie aufrufen update oder draw auf einem gerenderten Ball wenn es sich um eine zustandslose Funktionskomponente handelt.

In den meisten Fällen sollten Sie die Funktionen außerhalb der Komponentenfunktion deklarieren, damit Sie sie nur einmal deklarieren und immer dieselbe Referenz wiederverwenden. Wenn Sie die Funktion im Inneren deklarieren, wird die Funktion jedes Mal, wenn die Komponente gerendert wird, neu definiert.

Es gibt Fälle, in denen Sie eine Funktion innerhalb der Komponente definieren müssen, um sie beispielsweise als Ereignishandler zuzuweisen, der sich je nach den Eigenschaften der Komponente anders verhält. Aber trotzdem könntest du die Funktion außerhalb definieren Ball und binden Sie es mit den Eigenschaften, wodurch der Code viel sauberer wird und die update oder draw Funktionen wiederverwendbar.

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

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

Wenn du verwendest Haken, kannst du verwenden useCallback um sicherzustellen, dass die Funktion nur dann neu definiert wird, wenn eine ihrer Abhängigkeiten (props.x in diesem Fall) ändert sich:

const Ball = props => {
  const onClick = useCallback((a, b) => {
    // do something with a, b and props.x
  }, [props.x]);

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

Das ist der falsche Weg:

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

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

Beim Benutzen useCallback, definieren die update Funktion in der useCallback Das Verhaken unserer Außenseite des Bauteils wird vor allem zu einer Designentscheidung, die Sie berücksichtigen sollten, wenn Sie sie wiederverwenden möchten update und/oder wenn Sie auf den Umfang der Schließung der Komponente zugreifen müssen, um beispielsweise den Zustand zu lesen/zu schreiben. Persönlich entscheide ich mich dafür, es standardmäßig innerhalb der Komponente zu definieren und es nur bei Bedarf wiederverwendbar zu machen, um ein Over-Engineering von Anfang an zu verhindern. Darüber hinaus ist die Wiederverwendung von Anwendungslogik besser mit spezifischeren Hooks zu erreichen, die Komponenten für Präsentationszwecke belassen. Die Definition der Funktion außerhalb der Komponente bei der Verwendung von Hooks hängt wirklich davon ab, welchen Grad der Entkopplung von React Sie für Ihre Anwendungslogik wünschen.

  • Danke Marco, das klärt die Sache etwas auf. Die Sache, die mich in meinem Fall verwirrt, bezieht sich auf die this.draw Funktion innerhalb der Ball. Es verwendet die ctx von was wäre das der eltern <canvas> und verwendet auch die this Stichwort für was wäre das Kind Ball Komponente. Was wäre der beste Weg, um die zustandslose Komponente zu integrieren, damit auf diese beiden Eigenschaften zugegriffen werden kann?

    – MarkenCode

    10. September ’17 um 7:43


  • es gibt kein this Beachten Sie dies, wenn Sie zustandslose Funktionskomponenten verwenden. Für den Canvas-Kontext müsstest du ihn an jeden einzelnen weitergeben Ball, das hört sich gar nicht gut an.

    – Marco Scabbiolo

    10. September ’17 um 7:47

  • @MarcoScabbiolo nein nein, das ist nicht mein Fall, ich verwende Pfeilfunktionen schon seit geraumer Zeit nativ, da der einzige Browser sie nicht unterstützt, der IE ist. Tatsächlich habe ich es geschafft, diesen Kommentar von zu finden ein Artikel wo das eigentlich behauptet wird bind speziell in Chrome früher als 59 war sogar Langsamer als Pfeilfunktionen. Und in Firefox ist es auch eine ganze Weile her, da beide mit der gleichen Geschwindigkeit arbeiten. Also ich würde sagen, in solchen Fällen macht es keinen Unterschied, was der bevorzugte Weg ist 🙂

    – Vadim Kalinin

    5. Apr. ’19 um 17:19

  • @ MauricioAvendaño funktioniert so oder so, aber es ist eine schlechte Praxis für die Something um zu wissen, dass es eine Requisite X in ihrer Elternkomponente gibt, da sie sich ihres Kontexts bewusst macht. Dasselbe gilt für die von Ihnen gestellte Frage und den Beispielcode, den ich geschrieben habe, es hängt vom Kontext ab, der der Einfachheit halber ignoriert wird.

    – Marco Scabbiolo

    19. Apr. ’20 um 22:24

  • @Atif Hängt von der Komponente und ihren Kindern ab. Verstehen warum: responsejs.org/docs/reconciliation.html Messe Es: responsejs.org/docs/optimizing-performance.html

    – Marco Scabbiolo

    9. Februar ’21 um 21:27

Wohin sollen Funktionen in Funktionskomponenten gehen
Ruchir Saxena

Sie können Funktionen in zustandslose Funktionskomponenten platzieren:

function Action() {
    function handlePick(){
        alert("test");
    }

    return (
        <div>
            <input type="button" onClick={handlePick} value="What you want to do ?" />
        </div>
    )
}

Aber es ist keine gute Praxis, da die Funktion handlePick() wird jedes Mal definiert, wenn die Komponente gerendert wird.

Es wäre besser, die Funktion außerhalb der Komponente zu definieren:

function handlePick(){
    alert("test");
}

function Action() {
    return (
        <div>
            <input type="button" onClick={handlePick} value="What you want to do ?" />
        </div>
    )
}

1641737376 750 Wohin sollen Funktionen in Funktionskomponenten gehen
Hossein Mohammadi

Wenn Sie Props oder den Zustand der Komponente in der Funktion verwenden möchten, sollte dies in der Komponente mit useCallback definiert werden.

function Component(props){
  const onClick=useCallback(()=>{
     // Do some things with props or state
  },[])

  return <Something {...{onClick}} />
}

Auf der anderen Seite, wenn Sie keine Requisiten oder Zustände in der Funktion verwenden möchten, definieren Sie dies außerhalb der Komponente.

const computeSomethings=()=>{
   // Do some things with params or side effects
}

function Component(props){
  return <Something onClick={computeSomethings} />
}

Für HTML-Tags benötigen Sie useCallback nicht, da dies in der Reaktionsseite behandelt und nicht HTML zugewiesen wird

function Component(props){
  const onClick=()=>{
     // Do some things with props or state
  }

  return <Something {...{onClick}} />
}

Bearbeiten: Funktionen in Hooks

Für die use-Funktion in Hooks, zum Beispiel useEffect, schlage ich vor, die Funktion innerhalb von useEffect zu definieren. Was ist mit Hakendeps? Sie sollten/könnten alle Ihre Parameter zu Hooks deps hinzufügen, aber useEffect braucht nur deps, die sich auf die Änderungen auswirken sollen.

  • Können Sie ein Beispiel für die Verwendung von Hooks für die Methode innerhalb einer funktionalen Komponente geben? (keine Set-State-Methode)

    – jake-ferguson

    7. August ’19 um 15:47

1641737376 524 Wohin sollen Funktionen in Funktionskomponenten gehen
Vishant Rastogi

Wir können den React-Hook verwenden useCallback wie unten in einer Funktionskomponente:

const home = (props) => {
    const { small, img } = props
    const [currentInd, setCurrentInd] = useState(0);
    const imgArrayLength = img.length - 1;
    useEffect(() => {
        let id = setInterval(() => {
            if (currentInd < imgArrayLength) {
                setCurrentInd(currentInd => currentInd + 1)
            }
            else {
                setCurrentInd(0)
            }
        }, 5000);
        return () => clearInterval(id);
    }, [currentInd]);
    const onLeftClickHandler = useCallback(
        () => {
            if (currentInd === 0) {

            }
            else {
                setCurrentInd(currentInd => currentInd - 1)
            }
        },
        [currentInd],
    );

    const onRightClickHandler = useCallback(
        () => {
            if (currentInd < imgArrayLength) {
                setCurrentInd(currentInd => currentInd + 1)
            }
            else {

            }
        },
        [currentInd],
    );
    return (
        <Wrapper img={img[currentInd]}>
            <LeftSliderArrow className={currentInd > 0 ? "red" : 'no-red'} onClick={onLeftClickHandler}>
                <img src={Icon_dir + "chevron_left_light.png"}></img>
            </LeftSliderArrow>
            <RightSliderArrow className={currentInd < imgArrayLength ? "red" : 'no-red'} onClick={onRightClickHandler}>
                <img src={Icon_dir + "chevron_right_light.png"}></img>
            </RightSliderArrow>
        </Wrapper>);
}

export default home;

Ich bekomme ‘img’ von seinem Elternteil und das ist ein Array.

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  const a = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={a}>Click me</button>
    </div>
  );
}
export default Example;

  • Ich würde empfehlen, keine Frage zu beantworten, die seit 3 ​​Jahren besteht und eine Frage mit so vielen positiven Stimmen beantwortet hat. Sie werden wahrscheinlich nicht über Ihre abgestimmt.

    – Richard Hpa

    7. Juli ’21 um 5:32

  • Ich würde empfehlen, keine Frage zu beantworten, die seit 3 ​​Jahren besteht und eine Frage mit so vielen positiven Stimmen beantwortet hat. Sie werden wahrscheinlich nicht über Ihre abgestimmt.

    – Richard Hpa

    7. Juli ’21 um 5:32

.

216350cookie-checkWohin sollen Funktionen in Funktionskomponenten gehen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy