Due modi di definire i componenti di reazione ES6

Question

Stavo guardando this fiddle per MobX e ho visto questi due modi di definire React Components in ES6 anche in altri posti, come la serie di video di Red Hawghead di Dan Abramov.

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

La mia domanda è, quando è opportuno utilizzare ogni tipo?

Sembra che i componenti più semplici siano in grado di utilizzare la sintassi più semplice, ma mi piacerebbe seguire una regola o una linea guida.

Grazie!

Answer 1

Il secondo modello si chiama "stateless componenti funzionali", ed il suo utilizzo è raccomandato in quasi tutti i casi. Le SFC (componenti funzionali stateless) sono funzioni pure che dipendono solo dal loro props. Sono più facili da testare, disaccoppiati gli uni dagli altri e avranno in futuro significativi miglioramenti delle prestazioni rispetto ad altri modelli. (source dal sito ufficiale reagire documentazione)

Hanno un paio di grattacapi, però, vale a dire:

• Non si può collegare ref s alla SFC. (src, src2)
• Non possono avere lo stato interno. (src)
• Non possono utilizzare i metodi del ciclo di vita. (Ad esempio componentDidMount, src)

Se avete bisogno di queste cose, prima assicurarsi che non v'è alcun modo per aggirare il loro utilizzo e solo allora utilizzare l'ES6 class oi React.createClass modelli.

---

consiglio vivamente "Should I use React.createClass, ES6 Classes or stateless functional components?" da James K Nelson per capire i compromessi e le differenze tra questi modelli, e "Presentational and Container Components" di Dan Abramov per una spiegazione della struttura più comunemente usato per le applicazioni Redux.