Funziona in componenti senza stato?

Sto cercando di convertire questa fantastica <canvas>animazione che ho trovato qui in un componente riutilizzabile React. Sembra che questo componente richieda un componente padre per l'area di disegno e molti componenti figli per il function Ball().

Per motivi di prestazioni sarebbe probabilmente meglio trasformare i Ballscomponenti senza stato in quanto ce ne saranno molti. Non ho familiarità con la creazione di componenti senza stato e mi chiedevo dove dovrei definire le funzioni this.update()e this.drawche sono definite in function Ball().

Le funzioni per i componenti senza stato vanno all'interno o all'esterno del componente? In altre parole, quale delle seguenti è migliore?

1:

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

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

    return (
       ...
    );
}

2:

function update() {
     ...
}

function draw() {
     ...
}

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

Quali sono i pro / contro di ciascuno e sono migliori per casi d'uso specifici come il mio?

La prima cosa da notare è che i componenti funzionali senza stato non possono avere metodi, non dovresti contare sulla chiamata updateo drawsu un rendering Ballse è un componente funzionale senza stato.

Nella maggior parte dei casi dovresti dichiarare le funzioni al di fuori della funzione del componente in modo da dichiararle solo una volta e riutilizzare sempre lo stesso riferimento. Quando si dichiara la funzione all'interno, ogni volta che viene eseguito il rendering del componente la funzione verrà definita di nuovo.

Ci sono casi in cui sarà necessario definire una funzione all'interno del componente, ad esempio, per assegnarlo come gestore di eventi che si comporta in modo diverso in base alle proprietà del componente. Tuttavia è ancora possibile definire la funzione all'esterno Balle associarla alle proprietà, rendendo il codice molto più pulito e le funzioni updateo drawriutilizzabili.

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

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

Se stai usando gli hook , puoi usare useCallbackper assicurarti che la funzione venga ridefinita solo quando una delle sue dipendenze ( props.xin questo caso) cambia:

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

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

Questo è il modo sbagliato :

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

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

Quando si utilizza useCallback, definire la updatefunzione useCallbacknell'hook stesso al di fuori del componente diventa più che altro una decisione di progettazione, da tenere in considerazione se si intende riutilizzare updatee / o se è necessario accedere all'ambito della chiusura del componente a, ad esempio, leggere / scrivere nello stato. Personalmente scelgo di definirlo di default all'interno del componente e di renderlo riutilizzabile solo in caso di necessità, per evitare over-engineering sin dall'inizio. Inoltre, il riutilizzo della logica dell'applicazione è fatto meglio con hook più specifici, lasciando i componenti per scopi di presentazione. La definizione della funzione all'esterno del componente durante l'utilizzo degli hook dipende in realtà dal grado di disaccoppiamento da React che si desidera per la logica dell'applicazione.

Possiamo avere funzioni all'interno di componenti funzionali senza stato, di seguito è riportato l'esempio:

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

Ma non è una buona pratica in quanto la funzione handlePick()verrà definita ogni volta che viene chiamato il componente.

Possiamo usare l'hook React useCallbackcome di seguito in un componente funzionale:

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;

Ricevo "img" dal suo genitore e questo è un array.

Se vuoi usare oggetti di scena o lo stato del componente in funzione, questo dovrebbe essere definito nel componente con useCallback.

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

D'altra parte, se non vuoi usare oggetti di scena o state in function, definiscili al di fuori del componente.

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

function Component(props){
  
}