ES6を定義する2つの方法Reactコンポーネント

Question

私はMobXのthis fiddleを見ていましたが、Dan Abramovのegghead reduxビデオシリーズのようなES6のリアクションコンポーネントを定義する2つの方法を見てきました。

@observer 
class TodoListView extends Component { 
    render() { 
     return <div> 
      <ul> 
       {this.props.todoList.todos.map(todo => 
        <TodoView todo={todo} key={todo.id} /> 
       )} 
      </ul> 
      Tasks left: {this.props.todoList.unfinishedTodoCount} 
     </div> 
    } 
} 

const TodoView = observer(({todo}) => 
    <li> 
     <input 
      type="checkbox" 
      checked={todo.finished} 
      onClick={() => todo.finished = !todo.finished} 
     /> 
     <input 
      type="text" 
      value={todo.title} 
      onChange={ e => todo.title = e.target.value } /> 
    </li> 
); 

私の質問は、それぞれのタイプをいつ使用するのが適切ですか？

もっと単純なコンポーネントでは単純な構文を使うことができるようですが、私はルールやガイドラインを従ってください。

ありがとうございます！

Answer 1

第二のパターンは「ステートレス機能コンポーネント」と呼ばれ、それを使用するほぼすべて例で推奨されています。 SFC（ステートレス機能コンポーネント）は、propsにのみ依存する純粋な関数です。それらはテストが容易であり、互いに分離されており、将来、他のパターンよりも大幅にパフォーマンスが向上します。 （公式からsourceは、ドキュメントを反応させる）

彼らはすなわち、しかし、いくつかの落とし穴があります：

• 一つは、SFCのにref Sを添付することはできません。 （src,src2）
• 内部状態を持つことはできません。 （src）
• ライフサイクルメソッドを使用することはできません。 （例えばcomponentDidMount、src）

あなたはこれらのもののいずれかが必要な場合は、最初にそれらを使用して周りに方法がないことを確認し、だけにしてES6 classまたはReact.createClassパターンのいずれかを使用します。

---

私は非常にReduxのアプリケーションのための最も一般的に使用される構造の説明については、これらのパターンの間のトレードオフとの違いを理解するためにジェームズ・K・ネルソンによって"Should I use React.createClass, ES6 Classes or stateless functional components?"をお勧めします、そしてダン・アブラモフによって"Presentational and Container Components"。