Funkcje w składnikach bezstanowych?

Próbuję przekonwertować tę fajną <canvas>animację, którą tu znalazłem , na komponent wielokrotnego użytku React. Wygląda na to, że ten komponent wymagałby jednego komponentu nadrzędnego dla kanwy i wielu komponentów podrzędnych dla function Ball().

Ze względu na wydajność prawdopodobnie lepiej byłoby uczynić z nich Ballskomponenty bezstanowe, ponieważ będzie ich wiele. Nie jestem zaznajomiony z tworzeniem komponentów bezstanowych i zastanawiałem się, gdzie powinienem zdefiniować funkcje this.update()i, this.drawktóre są zdefiniowane w programie function Ball().

Czy funkcje dla komponentów bezstanowych znajdują się wewnątrz komponentu czy na zewnątrz? Innymi słowy, które z poniższych jest lepsze?

1:

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

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

    return (
       ...
    );
}

2:

function update() {
     ...
}

function draw() {
     ...
}

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

Jakie są zalety / wady każdego z nich i czy jeden z nich jest lepszy w konkretnych przypadkach użycia, takich jak mój?

Pierwszą rzeczą, na którą należy zwrócić uwagę, jest to, że bezstanowe komponenty funkcjonalne nie mogą mieć metod, nie powinieneś liczyć na wywołanie updatelub drawrenderowanie, Balljeśli jest to bezstanowy składnik funkcjonalny.

W większości przypadków powinieneś zadeklarować funkcje poza funkcją komponentu, więc deklarujesz je tylko raz i zawsze ponownie używasz tego samego odniesienia. Kiedy deklarujesz funkcję wewnątrz, za każdym razem, gdy komponent jest renderowany, funkcja zostanie ponownie zdefiniowana.

Istnieją przypadki, w których będziesz musiał zdefiniować funkcję wewnątrz komponentu, aby na przykład przypisać ją jako procedurę obsługi zdarzeń, która zachowuje się inaczej w zależności od właściwości komponentu. Ale nadal możesz zdefiniować funkcję na zewnątrz Balli powiązać ją z właściwościami, dzięki czemu kod będzie znacznie bardziej przejrzysty i sprawi, że funkcje updatelub będą drawwielokrotnego użytku.

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

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

Jeśli używasz hooków , możesz użyć, useCallbackaby upewnić się, że funkcja zostanie przedefiniowana tylko wtedy, gdy jedna z jej zależności ( props.xw tym przypadku) ulegnie zmianie:

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

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

To jest zły sposób :

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

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

Podczas używania useCallbackzdefiniowanie updatefunkcji w samym useCallbackhaku poza komponentem staje się bardziej decyzją projektową, niż cokolwiek innego, powinieneś wziąć pod uwagę, czy zamierzasz ponownie użyć updatei / lub jeśli potrzebujesz dostępu do zakresu zamknięcia komponentu, na przykład odczyt / zapis stanu. Osobiście wybieram zdefiniowanie go domyślnie wewnątrz komponentu i umożliwiam jego ponowne użycie tylko wtedy, gdy zajdzie taka potrzeba, aby zapobiec przeprojektowaniu od samego początku. Poza tym ponowne wykorzystanie logiki aplikacji jest lepsze dzięki bardziej szczegółowym punktom zaczepienia, pozostawiając komponenty do celów prezentacyjnych. Definiowanie funkcji poza komponentem podczas używania hooków zależy tak naprawdę od stopnia oddzielenia od Reacta, jakiego chcesz dla logiki aplikacji.

Możemy mieć funkcje wewnątrz bezstanowych komponentów funkcjonalnych, poniżej znajduje się przykład:

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

Nie jest to jednak dobra praktyka, ponieważ funkcja handlePick()będzie definiowana za każdym razem, gdy zostanie wywołany komponent.

Możemy użyć haka React useCallbackjak poniżej w komponencie funkcjonalnym:

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;

Otrzymuję „img” od jego rodzica i to jest tablica.

Jeśli chcesz użyć właściwości lub stanu komponentu w funkcji, należy to zdefiniować w komponencie za pomocą useCallback.

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

Z drugiej strony, jeśli nie chcesz używać właściwości lub stanu w funkcji, zdefiniuj to poza komponentem.

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

function Component(props){
  
}