В чём разница видов написания React компонентов?

Question

[Username]

Здравствуйте!
Можете поподробнее рассказать про 2 вид написания кода, какие его преимущества? Порекомендуйте, пожалуйста, статьи для изучения 2 вида синтаксиса.

1 - классический вид с офф сайта

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

2 - вид

import React from 'react';
import { string } from 'prop-types';
const Link = ({ title, url }) => <a href={url}>{title}</a>;
Link.propTypes = {
  title: string.isRequired,
  url: string.isRequired
};
export default Link;

Answer 1

[Ilya]

В первом случае компонент является полностью унаследован от класса Component, это значит что вы сможете использовать методы жизненного цикла, писать свои методы, компонент сможет хранить свое локальное состояние. Т.е. внутри компонента будет описана какая то логика.

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

Comments

[Username]

А какие преимущества написания "глупых" компонентов в таком стиле?

[Frozen Coder]

Username, Такие компоненты называют еще функциональными - ибо это просто функция render по сути. Сейчас вроде бы до сих пор сильной разницы по производительности нет, просто короче и удобнее, т.е. сахарок. Но вот уже давно обещают оптимизировать такие компоненты. Я, правда, за новостями особо не следил, может уже оптимизировали.