React. Виды компонентов в React.js

Оглавление

Приветствую тебя! Сегодня мы поговорим на такую тему как компоненты в react.js. Какие виды компонентов бывают и где мы их можем использовать.

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

Компонент бывают простыми и сложными. Для написания простоватого (чистого) компонента нам потребуется объявить его функцией.

Пример:


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

В новом синтаксисе ES6 мы можем описать его как стрелочную функцию


const Welcome = (props) =>
  <h1>Hello, {props.name}</h1>;
);

Данные записи являются абсолютно одинаковыми. Просто имеют разный синтаксис написания (по версиям js).

Для чего нам вообще нужны такие чистые компоненты и в каких случаях мы можем их применять? Все очень просто. Если нам не нужно хранить состояние внутри компонента то мы можем объявить его как функцию что приведет к лучшей читабельности нашего кода, а так же ее оптимизации с точки зрения быстродействия всего приложения.

Вывод: если нам не нужно хранить состояние компонента то мы всегда должны использовать stateless компонент.

Простой компонент (Simple Component)

Есть еще один вариант написания простого (чистого) компонента, но с использованием синтаксиса классов (ES6).


class Welcome extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

В этом примере мы реализовали функционал компонента из предыдущего примера но с использованием классов js.

Statefull component

Данный компонент мы будем называть «cложным» по причине хранения в нем состояния.


class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState((prevState) => ({
      seconds: prevState.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}