Основная цель компонентов — разделить весь пользовательский интерфейс на множество частей.
В React есть два типа компонентов
1. Функциональный компонент
2. Компонент класса
Функциональный компонент:
Функциональный компонент работает как функция javascript, принимает props (свойства) в качестве аргументов и возвращает элементы реакции.
Покажем, как работает функциональная составляющая
Здесь имя функционального компонента — Welcome, в качестве аргумента он принимает props. В теле функции приветствия она возвращает h1 с props.name.
Итак, почему мы говорим, что это функциональный компонент? ответ в том, что это похоже на функцию javascript, поэтому ее называют функциональным компонентом.
Компонент класса:
Прежде чем изучать компоненты класса, нам нужно знать, как написать класс в ES6.
class MyClass {
constructor() {
this.answer = 42;
}
}
const obj = new MyClass();
obj.answer; // 42
Мы используем синтаксис класса ES6 для написания компонентов класса.
Теперь нам нужно добраться до точки, есть ли разница между компонентом класса и функциональным компонентом? Наши два примера дают нам одинаковый результат. Но есть некоторые отличия от них. Во-первых, у обоих разный синтаксис. Во-вторых, функциональные компоненты принимают props(properties) в качестве аргумента и возвращают элемент React. С другой стороны, компонент класса расширяет React. Component и создайте функцию рендеринга, которая возвращает элемент React.
Удачного кодирования :)