render関数内の関数を返す

Question

関数をどこに配置するかは、反応コンポーネント内のどこにあるの？私はまだベストプラクティスを理解しようとしているので、反応を学んでいます。

class Content extends React.Component { 
    /// Whats the difference between putting functions here such as 
    Hello(){ 

    } 

    render(){ 
     /// or here 
    Hello(){ 

    } 


    return()(
     <div>blah blah </div> 

    ) 

    } 


    } 

Answer 1

レンダリングメソッド内の関数は、わずかなパフォーマンスヒットごとに作成されます。あなたがそれらをレンダリングに置くと面倒です。これははるかに大きな理由です.html出力を見るためにレンダリングのコードをスクロールする必要はありません。常にクラスに入れてください。

ステートレスコンポーネントの場合は、関数をmain関数の外に置き、代わりにpropsを渡すことをお勧めします。そうしないと、各関数も作成されます。パフォーマンスをテストしていないので、これがマイクロ最適化かどうかわかりませんが、それは注目に値します。

例：

const MyStatelessComponent = ({randomProp}) => (
    render() { 
     doSomething(randomProp); 

     return <div /> 
    } 
); 

doSomething = (randomProp) => { 
    //Do something here 
}