상태 비 저장 구성 요소의 기능은 무엇입니까?

Question

이 멋진 코드로 변환하려고합니다. here을 Reactable 재사용 가능한 구성 요소로 찾았습니다. <canvas> 애니메이션입니다. 이 구성 요소에는 캔버스에 하나의 부모 구성 요소가 필요하고 function Ball()에는 많은 하위 구성 요소가 필요합니다.

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

무국적 구성 요소의 함수가 구성 요소 내부 또는 외부로 이동합니까? 즉, 다음 중 어느 것이 더 낫습니다.

1 :

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

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

    return (
     ... 
    ); 
} 

2 :

function update() { 
    ... 
} 

function draw() { 
    ... 
} 

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

무슨 프로/각각의 죄수입니까 및 광산과 같은 특정 사용 사례에 대한 그들 중 하나 더 낫다? 주의 할

Answer 1

우선은 상태 비 기능적 구성 요소 메소드를 가질 수 없습니다, 당신은 그것이 비 저장 기능 컴포넌트 인 경우 렌더링 Ball에 update 또는 draw를 호출에 포함되지해야합니다.

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

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

이

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

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