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

Question

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

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

Answer 1

Вам нужно всего лишь class компонент при а) необходимо состояние компонента или б) нужны методы жизненного цикла, такие как componentDidMount и т.д.

Answer 2

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

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

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

Redux-х создатель Дэн Абрамов написать статью Presentational and Container Components:

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

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

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

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

статья

Кори Хауса React Stateless Functional Components: Nine Wins You Might Have Overlooked дайте мне знать функциональные преимущества КОМПОНЕНТОВ, в функциональных компонентах являются более:

• простого
• читаемых
• проверяемым

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

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

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

4. Функциональные компоненты Enforced Best Practices

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

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

Answer 3

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

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

Пример:

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

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

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

Пример:

class Foo extends Component { 

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