Unterschiedliche Möglichkeit zum Erstellen von Komponente

Question

Im Redux-Lernprogramm gibt es zwei verschiedene Möglichkeiten beim Erstellen von Komponenten. Was ist der Unterschied

WAY1:

import React, { PropTypes } from 'react' 
import Todo from './Todo' 

const TodoList = ({ todos, onTodoClick }) => (
    <ul> 
    {todos.map(todo => 
     <Todo 
     key={todo.id} 
     {...todo} 
     onClick={() => onTodoClick(todo.id)} 
     /> 
    )} 
    </ul> 
) 

export default TodoList 

WAY2:

import React, { Component, PropTypes } from 'react'; 
import Todo from './Todo'; 

export default class TodoList extends Component { 
    render() { 
    return (
     <ul> 
     {this.props.todos.map((todo, index) => 
      <Todo {...todo} 
       key={index} 
       onClick={() => this.props.onTodoClick(index)} /> 
     )} 
     </ul> 
    ) 
    } 
} 

Answer 1

Die erste ein stateless functional component in reagieren 0.14 eingeführt ist.

Die zweite Komponente ist eine klassenbasierte Komponente, die verwendet werden kann, um den Status zu behandeln, und hat Zugriff auf lifecycle methods von React.Component.

In Redux werden statusfreie Funktionen hauptsächlich für Darstellungskomponenten verwendet und klassische klassenbasierte Komponenten werden für Containerkomponenten verwendet, die sich um den Zustand kümmern. Mehr zu diesem Thema finden Sie hier: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mqt3zyon5

https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

In einer idealen Welt würden die meisten Ihre Komponenten Funktionen, weil in Zukunft staatenlos sind wir werden auch in der Lage Leistung zu machen Optimierungen für diese Komponenten durch Vermeidung unnötiger Checks und Speicherzuweisungen. Dies ist das empfohlene Muster, wenn möglich ist.