상태 비 저장 구성 요소의 기능?

여기서<canvas> 찾은 이 멋진 애니메이션을 React 재사용 가능한 구성 요소로 변환하려고합니다 . 이 구성 요소에는 캔버스에 대해 하나의 상위 구성 요소가 필요하고 .function Ball()

성능상의 이유로 Balls상태 비 저장 구성 요소로 만드는 것이 더 좋을 것입니다. 상태 비 저장 구성 요소를 만드는 데 익숙하지 않으며 .NET에서 정의 된 this.update()및 this.draw함수를 어디에서 정의해야하는지 궁금합니다 function Ball().

상태 비 저장 구성 요소에 대한 함수는 구성 요소 내부 또는 외부로 이동합니까? 즉, 다음 중 어느 것이 더 낫습니까?

1:

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

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

    return (
       ...
    );
}

2 :

function update() {
     ...
}

function draw() {
     ...
}

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

각각의 장단점은 무엇이며 그중 하나가 저와 같은 특정 사용 사례에 더 적합합니까?

가장 먼저 주목해야 할 점은 상태 비 저장 기능 구성 요소가 메서드를 가질 수 없다는 것입니다. 상태 비 저장 기능 구성 요소 인 경우 호출 update또는 draw렌더링에 의존해서는 안됩니다 Ball.

대부분의 경우 구성 요소 함수 외부에서 함수를 선언하여 한 번만 선언하고 항상 동일한 참조를 재사용하도록해야합니다. 내부에서 함수를 선언하면 구성 요소가 렌더링 될 때마다 함수가 다시 정의됩니다.

예를 들어 구성 요소의 속성에 따라 다르게 작동하는 이벤트 처리기로 할당하기 위해 구성 요소 내부에 함수를 정의해야하는 경우가 있습니다. 그러나 여전히 외부에서 함수를 정의하고 Ball속성과 바인딩하여 코드를 훨씬 더 깔끔하게 만들고 updateor draw함수를 재사용 할 수 있습니다.

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

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

hooks를 사용하는 경우을 사용 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에서 분리 등급에 따라 다릅니다.

상태 비 저장 기능 구성 요소 내부에 함수를 가질 수 있습니다. 아래는 예입니다.

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

그러나 handlePick()구성 요소가 호출 될 때마다 함수 가 정의 되므로 좋은 방법이 아닙니다 .

useCallback기능적 구성 요소에서 아래와 같이 React 후크 를 사용할 수 있습니다 .

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'를 얻고 있는데 그것은 배열입니다.

함수에서 props 또는 컴포넌트의 상태를 사용하려면 useCallback을 사용하여 컴포넌트에 정의해야합니다.

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

반면에 props 또는 state in function을 사용하지 않으려면 컴포넌트 외부에서 정의하십시오.

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

function Component(props){
  
}