矢印関数ハンドラを持つ機能コンポーネントは、パフォーマンスのために優れていて、コンストラクタにバインドされたハンドラを持つクラスコンポーネントですか？

Question

私は、コンポーネントがレンダリングされるたびに関数を再作成する必要があるため、悪い習慣と見なされる矢印関数イベントハンドラを持つ機能コンポーネントを持っています。

const SimpleQuestion = ({ 
    question, 
    onChangeQuestionTitle 
}) => { 

    return (
    <div> 
     <input 
     type="text" 
     placeholder="Enter Question" 
     value={question.title} 
     onChange={(e) => onChangeQuestionTitle({ 
      id: question.id, 
      title: e.target.value 
     })} 
     /> 
    </div> 
); 
}; 

それは小道具にアクセスする必要があるように私は、それのために外部関数を定義することはできません、また私は、この例ではすべての利点を参照してください。

const SimpleQuestion = ({ 
    question, 
    onChangeQuestionTitle 
}) => { 

    const handleChangeQuestionTitle = (e) => { 
    onChangeQuestionTitle({ 
     id: question.id, 
     title: e.target.value 
    }); 
    }; 

    return (
    <div> 
     <input 
     type="text" 
     placeholder="Enter Question" 
     value={question.title} 
     onChange={handleChangeQuestionTitle} 
     /> 
    </div> 
); 
}; 

矢印機能の必要性を排除するために、私はクラスのコンポーネントを使用することができますコンストラクタとbind（）を使用します。例：

class SimpleQuestion extends React.Component { 
    constructor(...args) { 
    super(...args) 
    this.onChangeQuestionTitle = this.onChangeQuestionTitle.bind(this); 
    } 

    render() { 
    return (
     <div> 
     <input 
      type="text" 
      placeholder="Enter Question" 
      value={question.title} 
      onChange={this.onChangeQuestionTitle} 
     /> 
     </div> 
    ); 
    } 

    onChangeQuestionTitle(e) { 
    this.props.onChangeQuestionTitle({ 
     id: question.id, 
     title: e.target.value 
    }); 
    } 
} 

私は矢印の機能を持つクラスのコンポーネントまたは機能コンポーネントを使用する必要がありますか？パフォーマンスの観点からはどちらが良いでしょうか？

PS：質問コンポーネントからロジックをエクスポートし、親コンテナ内でハンドラロジックを実行できることを知っていますが、この問題はパフォーマンストピックに関するものです。

ありがとう

Answer 1

どちらかの方法が優先されます。どちらを選ぶべきかは、個人的な好みだと思います。私はあなたがコンストラクタでバインドする必要がないので、私は個人的に太い矢印の構文（＃2）を好みます。しかしどちらの場合でも、関数への参照（関数定義ではなく）をrender（）に渡すことで、不要な無名関数を作成する問題を解決しています。

Answer 2

あなたは一部のjsxを返す必要があり、コンポーネントの状態やライフサイクルの方法について気にしないので、最良のオプションは＃2です。

関数への参照を関数自体のメソッドではなくrender()メソッドに渡すことで、不要な匿名関数を作成するという問題については解決します。