Если ваш компонент имеет состояние или содержит используемые методы значимые для компонента, то используйте Class component. В других случаях используйте Functional component.

Функциональный компонент - это обычная функция JavaScript, возвращающая JSX.

function Welcome(props) {
  return <h1>Привет, {props.name}</h1>
}

Эта функция — компонент, потому что она получает данные в одном объекте («пропсы») в качестве параметра и возвращает React-элемент. Мы будем называть такие компоненты «функциональными», так как они буквально являются функциями.

Компонент класса - это расширяемый класс JavaScript, React.

class Welcome extends React.Component {
  render() {
    return <h1>Привет, {this.props.name}</h1>
  }
}

Классы используются, когда нужно хранить состояние через props . Пропсы доступны через this.props. Классы наследуют React.component , а через метод render() возвращается элемент.

Преобразование функционального компонента в классовый компонент

1. Создаём ES6-класс с таким же именем, указываем React.Component в качестве родительского класса
2. Добавим в класс пустой метод render()
3. Перенесём тело функции в метод render()
4. Заменим props на this.props в теле render()
5. Удалим оставшееся пустое объявление функции

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Привет, мир!</h1>
        <h2>Сейчас {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}

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

Назад