Реагировать на функциональные компоненты против классических компонентов

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

Функциональный компонент менее мощный, но более простой и действует как компонент класса только с одним методом render(). Если вам не нужны функции, доступные только в классе, мы рекомендуем вам вместо этого использовать функциональные компоненты.

ОТВЕТЫ

Ответ 1

Вам нужен только компонент class когда вы:

  • нужно состояние компонента или
  • нужны методы жизненного цикла. такие как componentDidMount и т.д.

Ответ 2

1. Когда мы используем каждый вид компонентов?

Если мы используем Redux, будет два вида компонентов:

  • Презентационные компоненты: забота об интерфейсе
  • Компоненты контейнера: управление состоянием

Создатель Redux Дан Абрамов написать статью Презентационные и контейнерные компоненты:

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

Хотя мы не используем Redux. Мы также можем разделить компоненты на Презентационные компоненты и Контейнерные компоненты.

  • Презентационные компоненты используют функциональные компоненты и относятся только к пользовательскому интерфейсу.
  • Контейнерные компоненты используют классовые компоненты и касаются состояния и поведения.

2. Преимущества функциональных компонентов

Статья Cory House React Stateless Функциональные компоненты: девять побед, которые вы, возможно, упустили, дайте мне знать о преимуществах функциональных компонентов, функциональных компонентов больше:

  • просто
  • удобочитаемый
  • тестируемый

3. Предел функциональных компонентов

Но функциональные компоненты не имеют состояния, что является его пределом.

Но, к счастью, в большинстве случаев нам не нужно государство.

4. Функциональные компоненты, обязательные передовые практики

Функциональные компоненты без сохранения состояния полезны для тупых/презентационных компонентов. Презентационные компоненты сосредоточены на пользовательском интерфейсе, а не на поведении, поэтому важно избегать использования состояния в презентационных компонентах. Вместо этого состояние должно управляться компонентами-контейнерами более высокого уровня или через Flux/Redux/etc. Функциональные компоненты без сохранения состояния не поддерживают методы состояния или жизненного цикла. Это хорошая вещь. Зачем? Потому что это защищает от лени.

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

Ответ 3

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

  • Используется для представления статических данных.
  • Не удается обработать данные
  • Легко писать

Пример:

const Foo =()=>
{
   return <Text>Hi there!</Text>
}

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

  • Используется для динамического источника данных
  • Обрабатывает любые данные, которые могут измениться (выборка данных, пользовательских событий и т.д.).
  • Больше кода для написания

Пример:

class Foo extends Component {

render(){
return <Text>Hi There!</Text>
  }
}