Два способа определения компонентов реакции ES6

Я смотрел на эту скрипку для MobX, и я видел эти два способа определения React Components в ES6 в других местах, таких как Dan Abramov egghead redux video серии.

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

Мой вопрос в том, когда целесообразно использовать каждый тип?

Похоже, что более простые компоненты могут использовать более простой синтаксис, но мне бы хотелось, чтобы правила или рекомендации следовали.

Спасибо!

Ответы

Ответ 1

Второй шаблон называется " безстоящими функциональными компонентами", а его использование рекомендуется практически во всех случаях. SFC (функциональные компоненты без состояния) являются чистыми функциями, которые зависят только от их props. Они легче тестируются, отделены друг от друга и будут иметь значительный прирост производительности по сравнению с другими образцами в будущем. (источник из официальной документации)

У них есть несколько gotchas, а именно:

  • Нельзя присоединить ref к SFC. (src, src2)
  • У них не может быть внутреннего состояния. (src)
  • Они не могут использовать методы жизненного цикла. (например, componentDidMount, src)

Если вам нужна какая-либо из этих вещей, сначала убедитесь, что нет возможности использовать их, и только затем используйте либо шаблоны ES6 class, либо React.createClass.

Я настоятельно рекомендую "Должен ли я использовать React.createClass, ES6 Classes или безстоящие функциональные компоненты?" Джеймсом К. Нельсоном, чтобы понять компромиссы и разница между этими шаблонами и "Презентационные и контейнерные компоненты" Дэн Абрамов для объяснения наиболее часто используемой структуры для приложений Redux.