기능 구성요소의 기능은 어디로 이동해야 합니까?

기능 구성요소의 기능은 어디로 이동해야 합니까?

는 이 하려고 한다<canvas>React 재사용 가능한 컴포넌트에 애니메이션을 추가했습니다.이 컴포넌트는 캔버스에 1개의 상위 컴포넌트를 필요로 하는 것 같습니다.또한 이 컴포넌트에는 다수의 하위 컴포넌트를 필요로 합니다.function Ball().

로, 포포 it, the it the the the 를 만드는 .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 (
       ...
    );
}

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

기능 는 메서드를 수 즉, 스테이트리스 기능 컴포넌트는 다음과 같습니다.할 안 된다update ★★★★★★★★★★★★★★★★★」drawBall★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

대부분의 경우 함수는 컴포넌트 함수 외부에 선언해야 합니다.따라서 한 번만 선언하고 항상 동일한 참조를 재사용할 수 있습니다.함수를 내부에서 선언하면 구성요소가 렌더링될 때마다 함수가 다시 정의됩니다.

예를 들어 컴포넌트 속성에 따라 다르게 동작하는 이벤트핸들러로서 할당하기 위해서 컴포넌트내에 함수를 정의할 필요가 있는 경우가 있습니다. 그 할 수 .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 : in in （ ） :

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} />
  );
}

「」를 사용하고 useCallbackupdateuseCallback후크 자체 또는 컴포넌트 외부에 대한 설계 결정이 무엇보다 중요합니다. 사용할 update또는 컴포넌트 폐쇄 범위에 액세스해야 하는 경우(예: 상태에 대한 읽기/쓰기).개인적으로는 처음부터 과도한 엔지니어링을 방지하기 위해 기본적으로 컴포넌트 내부에서 정의하고 필요할 때만 재사용할 수 있도록 합니다.게다가 애플리케이션 로직의 재사용은, 보다 구체적인 훅에 의해서 행해지기 때문에, 컴포넌트는 프레젠테이션용으로 남겨집니다.후크를 사용하는 동안 컴포넌트 외부에서 함수를 정의하는 것은 애플리케이션 로직에서 원하는 React로부터의 디커플링 등급에 따라 달라집니다.

에 대한 또 다른 일반적인 논의useCallback항상 모든 기능에 사용할지 여부입니다.즉, treat는 opt-in 또는 항상 권장됩니다.항상 사용하라고 주장하겠습니다.useCallback의를 랩하지 않아 발생하는 버그를 많이 .useCallback퍼포먼스나 논리에 영향을 주는 시나리오는 단 하나도 없습니다.대부분의 경우 종속성이 변경되지 않는 동안 참조를 유지하고자 하므로 함수 자체를 다른 효과, 메모 또는 콜백의 종속성으로 사용할 수 있습니다. 콜백은 되며, 콜백을 다른 로 전달됩니다.또한 콜백을 메모했을 경우useCallback가격이 얼마나 저렴한지 또는 비용이 많이 드는지에 관계없이 소품(재포장)을 변경할 수 없습니다.는 수천 되어 있는 것을 단 한 .useCallback, 는 한, 대, 한한 、 notized 、 부ized 、 notizedizedizedizedized not not 。useCallback개발자가 그렇게 하지 않을 경우 심각한 버그나 성능 문제를 일으킬 수 있습니다.엄밀히 말하면, 를 사용하여 퍼포먼스에 영향을 줍니다.useCallback 및 할 수 useCallback'JavaScript'를 리액트합니다.,에 대한 하고 있다면,useCallbackReact가 이 작업에 적합한 도구인지 자문해 보아야 합니다.

스테이트리스 기능 컴포넌트 내에 기능을 배치할 수 있습니다.

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

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

이 않습니다.handlePick()컴포넌트가 렌더링될 때마다 정의됩니다.

컴포넌트 외부에서 기능을 정의하는 것이 좋습니다.

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

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

기능 중인 소품 또는 컴포넌트 상태를 사용하려면 useCallback을 사용하여 컴포넌트에 정의해야 합니다.

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

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

반면 소품이나 기능 상태를 사용하지 않으려면 구성 요소 외부에서 정의하십시오.

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

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

HTML 태그의 경우 use Callback은 리액트 측에서 처리되며 HTML에 할당되지 않기 때문에 필요하지 않습니다.

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

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

편집: 후크 기능

예를 들어 useEffect의 useEffect에 대해서는 useEffect 내부에 함수를 정의하는 것을 제안합니다.DRY가 걱정되면 훅으로 호출하여 자신의 파라미터를 부여합니다.후크 뎁은요?모든 매개 변수를 후크 디프에 추가해야 하지만 useEffect에는 변경에 영향을 줄 수 있는 데프만 필요합니다.

을 할 수 .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"를 얻었고 그것은 배열이다.

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;

언급URL : https://stackoverflow.com/questions/46138145/where-should-functions-in-function-components-go