Zwei Möglichkeiten zum Definieren von ES6 React Components

Question

Ich habe mir this fiddle für MobX angesehen und ich habe diese zwei Möglichkeiten gesehen, React Components in ES6 auch an anderen Orten zu definieren, wie Dan Abramovs Egghead Redux Video Serie.

@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> 
); 

Meine Frage ist, wann ist es angemessen, jeden Typ zu verwenden?

Es scheint, als ob die einfacheren Komponenten in der Lage sind, die einfachere Syntax zu verwenden, aber ich möchte, dass eine Regel oder Richtlinie folgt.

Danke!

Answer 1

Das zweite Muster wird als „staatenlos Funktionskomponenten“ und Benutzung ist in fast alle Fällen empfohlen. SFCs (Stateless Functional Components) sind reine Funktionen, die nur von deren props abhängig sind. Sie sind einfacher zu testen, voneinander entkoppelt und weisen gegenüber anderen Mustern in der Zukunft signifikante Leistungssteigerungen auf. (source von der offiziellen reagieren Dokumentation)

Sie haben ein paar gotchas aber, nämlich:

• Man kann ref s SFCs nicht anhängen. (src, src2)
• Sie können nicht internen Zustand haben. (src)
• Sie können Lifecycle-Methoden nicht verwenden. (Z componentDidMount, src)

Wenn Sie all diese Dinge benötigen, zunächst sicherstellen, gibt es keine Möglichkeit, sie um verwenden und nur dann verwenden entweder die ES6 class oder die React.createClass Muster.

---

Ich empfehle "Should I use React.createClass, ES6 Classes or stateless functional components?" von James K Nelson hoch die Vor- und Nachteile und die Differenz zwischen diesen Mustern zu verstehen und "Presentational and Container Components" von Dan Abramov für eine Erklärung der am häufigsten verwendeten Struktur für Redux-Anwendungen.