Функції компонентів без стану?

Question 1

Я намагаюся перетворити цю класну <canvas>анімацію, яку я знайшов тут, на багаторазовий компонент React. Схоже, для цього компонента потрібен один батьківський компонент для полотна та багато дочірніх компонентів для function Ball().

З міркувань продуктивності, мабуть, було б краще перетворити Ballsкомпоненти без громадянства, оскільки їх буде багато. Я не настільки знайомий з виготовленням компонентів без стану, і мені було цікаво, де мені визначити функції this.update()та this.drawфункції, які визначені в function Ball().

Функції для компонентів без стану переходять всередину компонента або зовні? Іншими словами, що з наведеного краще?

1:

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

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

    return (
       ...
    );
}

2:

function update() {
     ...
}

function draw() {
     ...
}

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

Які плюси / мінуси кожного та чи є один із них кращим для конкретних випадків використання, таких як мій?

Question 2

Перше, на що слід звернути увагу, це те, що функціональні компоненти без громадянства не можуть мати методів, ви не повинні розраховувати на виклик updateабо drawна надання, Ballякщо це функціональний компонент без стану.

У більшості випадків вам слід оголосити функції поза функцією компонента, тому ви оголошуєте їх лише один раз і завжди використовуєте одне і те ж посилання. Коли ви оголошуєте функцію всередині, кожен раз, коли компонент відображається, функція буде визначена знову.

Бувають випадки, коли вам потрібно буде визначити функцію всередині компонента, щоб, наприклад, призначити її як обробник подій, яка поводиться по-різному залежно від властивостей компонента. Але все-таки ви можете визначити функцію зовні Ballі прив'язати її до властивостей, зробивши код набагато чистішим і зробивши функції updateабо drawбагаторазовими.

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

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

Якщо ви використовуєте хуки , ви можете використовувати, useCallbackщоб перевизначити функцію лише тоді, коли одна із залежностей ( props.xу даному випадку) змінюється:

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

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

Це неправильний шлях :

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

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

Під час використання useCallback, визначення updateфункції в самому useCallbackгачку нашого зовнішнього компонента стає дизайнерським рішенням більше, ніж будь-що, ви повинні враховувати, якщо ви збираєтеся повторно використовувати updateта / або якщо вам потрібно отримати доступ до області закриття компонента, наприклад, читати / писати в штат. Особисто я вирішив визначити його всередині компонента за замовчуванням і зробити його багаторазовим лише за потреби, щоб запобігти надмірному проектуванню з самого початку. Крім того, повторне використання логіки додатків краще робити за допомогою більш конкретних хуків, залишаючи компоненти для презентаційних цілей. Визначення функції поза компонентом під час використання хуків насправді залежить від ступеня роз'єднання з React, який ви хочете для вашої логіки програми.

Question 3

Ми можемо мати функції всередині функціональних компонентів без стану, нижче наведено приклад:

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

Але це не є доброю практикою, оскільки функція handlePick()визначається кожного разу, коли компонент викликається.

Question 4

Ми можемо використовувати гак React, useCallbackяк показано нижче, у функціональному компоненті:

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;

Я отримую 'img' від його батьківського, і це масив.

Question 5

Якщо ви хочете використовувати у функції функцію props або стан компонента, це слід визначити в компоненті з useCallback.

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

З іншого боку, якщо ви не хочете використовувати пропс або стан у функції, визначте це за межами компонента.

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

function Component(props){
  
}