ステートレスコンポーネントの機能ですか？

Question

私はhereをReact再利用可能なコンポーネントに見つけたので、これを涼しいものに変換しようとしています。<canvas>アニメーション。このコンポーネントはキャンバスに1つの親コンポーネントを必要とし、function Ball()には多くの子コンポーネントを必要とするようです。

パフォーマンス上の理由から、Ballsをステートレスコンポーネントにするほうがよいでしょう。私はステートレスなコンポーネントを作るのに慣れておらず、で定義されている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関数を再利用できるようにすることができます。

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

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

の代わり：

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

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