Реагировать: когда использовать компоненты класса ES6 по сравнению с функциональными компонентами ES6?

Проведя некоторое время, изучая React, я понимаю разницу между двумя основными парадигмами создания компонентов.

Мой вопрос в том, когда следует использовать какой и почему? каковы преимущества/компромиссы между собой?

ES6/7 классы:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

Функциональные:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

Я думаю о функциональности всякий раз, когда нет состояния, которое нужно манипулировать этим компонентом... но так ли это?

Я предполагаю, что если я использую какие-либо методы жизненного цикла, лучше всего пойти с компонентом на основе класса.

Ответы

Ответ 1

У вас есть правильная идея. Идите с функциональностью, если ваш компонент не делает гораздо больше, чем принимать некоторые реквизиты и рендеринг. Вы можете рассматривать их как чистые функции, потому что они всегда будут визуализировать и вести себя одинаково, учитывая те же реквизиты. Кроме того, они не заботятся о методах жизненного цикла или имеют собственное внутреннее состояние.

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

Если вашим компонентам требуется больше функциональности, например, сохранить состояние, вместо этого используйте классы.

Дополнительная информация: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Ответ 2

Всегда старайтесь использовать функции без состояния (функциональные компоненты), когда это возможно. Существуют сценарии, в которых вам нужно будет использовать обычный класс React:

  • Компонент должен поддерживать состояние
  • Компонент перерисовывает слишком много, и вам нужно контролировать это через shouldComponentUpdate
  • Вам нужен компонент

UPDATE

Теперь существует класс React, называемый PureComponent, который вы можете расширить (вместо Component), который реализует свой собственный shouldComponentUpdate, который позаботится о вас. Подробнее

Ответ 3

ОБНОВЛЕНИЕ март 2019

https://overreacted.io/how-are-function-components-different-from-classes/

ОБНОВЛЕНИЕ Фев 2019:

С появлением перехватчиков React кажется, что команды React хотят, чтобы мы использовали функциональные компоненты всякий раз, когда это возможно (что лучше соответствует функциональности JavaScript).

Их мотивация:

1.) Its hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

Функциональный компонент с хуками может делать почти все, что может делать компонент класса, без каких-либо недостатков, упомянутых выше.

Я рекомендую использовать их, как только вы сможете.

Оригинальный ответ

Функциональные компоненты не более легкие, чем компоненты, основанные на классах, "они работают точно как классы". - https://github.com/facebook/react/issues/5677

Приведенная выше ссылка немного устарела, но в документации React 16.7.0 говорится, что функциональные и классовые компоненты:

"эквивалентны с точки зрения Реагирования." - https://reactjs.org/docs/components-and-props.html#stateless-functions

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

В будущем (цитируя приведенную выше ссылку) "мы [React] могли бы добавить такие оптимизации".

Если вы пытаетесь повысить производительность за счет устранения ненужных визуализаций, оба подхода обеспечивают поддержку. memo для функциональных компонентов и PureComponent для классов.

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

Это действительно зависит от вас. Если вы хотите меньше шаблонов, работайте. Если вы любите функциональное программирование и не любите занятия, переходите на функциональность. Если вы хотите согласованности между всеми компонентами в вашей кодовой базе, используйте классы. Если вы устали от рефакторинга от функциональных компонентов к компонентам на основе классов, когда вам нужно что-то вроде state, переходите к занятиям.

Ответ 4

Начиная с React 16.8, термин "функциональные компоненты без состояния" вводит в заблуждение, и его следует избегать, поскольку они больше не являются лицами без состояния (React.SFC устарел, Дэн Абрамов в React.SFC), они могут иметь состояние, они могут иметь хуки (которые действуют как жизненный цикл). методы), они более или менее пересекаются с компонентами класса.

Компоненты на основе классов

  • государство
  • методы жизненного цикла
  • памятка с помощью React.PureComponent

Функциональные компоненты:

Почему я предпочитаю функциональные компоненты

  • React предоставляет хук useEffect, который представляет собой очень четкий и лаконичный способ объединения методов жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount
  • С помощью хуков вы можете извлечь логику, которая может быть легко разделена между компонентами и тестируемой
  • меньше путаницы по поводу объема работ

Реагировать мотивации на то, почему с помощью крюков (т.е. функциональные компоненты)