Классы в React
Реакт компоненты улобно создавать при помощи функций.
const AppHeader = ({toDo, done}) => {
return (
<div className="app-header d-flex">
<h1>Todo List</h1>
<h2>{toDo} more to do, {done} done</h2>
</div>
);
};
Такая функция принимает в качестве параметра объект props, в котором содержатся свойства компонента. Как правило, этот объект сразу же деструктурируется и нужные свойства используются в коде компонентов.
Возвращает функция реакт-элемент.
Работать с функциями очень удобно.
Они компактные, их легко использовать и тестировать.
Недостатком функций является то, что у них нет внутреннего состояния.
Нам некуда сохранять свойства компонента, которые могут изменяться во время работы программы.
Если нам нужен компонент, состояние которого будет меняться во время работы программы, для его создания необходимо использовать класс.
В приложении ToDo List таким компонентом могут быть элементы списка, которые можем отвечать как важные или не важные, выполненные или не выполненные, счётчик, указывающий количество выполненных дел.
Как превратить функцию в класс.
1. Пишем
class AppHeader extends React.Component {
}
Каждый компонент реакт наследует класс React.Component
2. Внутри класса пишем ключевое слово render и после него помещаем тело функции
class AppHeader extends React.Component {
render {
return (
<div className="app-header d-flex">
<h1>Todo List</h1>
<h2>{toDo} more to do, {done} done</h2>
</div>
);
};
}
3. Свойства props доступны как this.props
Деструктурируем их: const {toDo, done} = this.props;
Результат:
class AppHeader extends React.Component {
render (){
const {toDo, done} = this.props;
return (
<div className="app-header d-flex">
<h1>Todo List</h1>
<h2>{toDo} more to do, {done} done</h2>
</div>
);
};
}
Сохраняем полученный код и убеждаемся, что ничего не изменилось - класс из пункта 3 полностью соответствует функции, код которой указан в начале этой статьи.
Небольшой рефракторинг
Мы можем сразу импортировать Component, тогда нам не нужно будет писать React.Component
И мы можем назначить export default сразу перед словом class
Результат:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './AppHeader.css';
export default class AppHeader extends Component {
render() {
const {toDo, done} = this.props;
return (
<div className="app-header d-flex">
<h1>Todo List</h1>
<h2>{toDo} more to do, {done} done</h2>
</div>
);
};
}
Таким образом, от функции мы всегда можем перейти к классу. Функции предпочтительнее. Классы используем. если нужно хранить внутреннее состояние компонента, которое будет меняться по ходу выполнения программы.