Краткое введение в компоненты React

React основан на компонентах, и компонент обычно определяется как функция его состояния и свойств.

Компоненты могут быть созданы с помощью классов, содержащих render()метод или функцию. Компоненты возвращают дерево элементов после переноса из JSX (JavaScript XML).

Элемент — это очень простой объект, описывающий узел в DOM или других компонентах React. Этот элемент неизменяемый, поэтому он очень простой и легкий, он только передает свойства, как в примере ниже:

<div>{somePropsHere}</div>

Хорошо! Теперь вы знаете, что такое компоненты и элементы в React.

React поддерживает два типа компонентов: компоненты класса и функциональные компоненты. Функциональный компонент — это простая функция JavaScript, которая возвращает JSX. Компонент класса — это класс JavaScript, который расширяет React.Componentи возвращает JSX внутри метода рендеринга. Кроме того, компоненты класса могут иметь состояние (компонент класса с состоянием) или нет (компонент класса без состояния) .

В следующем фрагменте кода показан простой AppHeaderкомпонент, определенный как компонент класса и функциональный компонент:

// Declaring a Class Component in React.
import React, { Component } from 'react';

interface Props {
  header: string;
}

class AppHeader extends Component<Props> {
  public constructor(props: Props) {
    super(props);
  };
  
  const { header } = this.props;
  
  render() {
    return (
      <div>
        <h1>{header}</h1>
      </div>
    )
  }
}


// Declaring a Functional Component in React.
import React, { ReactElement } from 'react';

interface Props {
  header: string;
}

const AppHeader = ({
  header,
}: Props): ReactElement => (
  <div>
    <h1>{header}</h1>
  </div>
)

PureComponent — это тип компонента, идентичный Component, за исключением того, что он обрабатывает shouldComponentUpdate()метод за вас.

Чистые компоненты имеют некоторые улучшения производительности и оптимизацию рендеринга, поскольку React реализует shouldComponentUpdate()для них метод с неглубоким сравнением свойств и состояния.

Компонент, с другой стороны, не будет сравнивать текущие реквизиты и состояние со следующими из коробки.

Когда использовать PureComponent?

PureComponents в основном используется для оптимизации производительности.

Подводя итог, PureComponentполезно, когда:

• Вы хотите избежать циклов повторного рендеринга вашего компонента, когда его реквизиты и состояние не меняются.
• Состояние и реквизиты вашего компонента неизменяемы
• Вы не планируете реализовывать собственный shouldComponentUpdateметод жизненного цикла.

Не используйте его везде.

Вы должны использовать PureComponents, когда компонент может повторно рендериться, даже если он имеет те же реквизиты и состояние. Примером этого является ситуация, когда родительский компонент должен был повторно отрисовываться, но реквизиты и состояние дочернего компонента не изменились. Дочерний компонент может извлечь выгоду из PureComponent, потому что ему действительно не нужно повторно рендерить.

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

PureComponent работает только тогда, когда рендеринг вашего компонента зависит только от свойств и состояния.

Спасибо за прочтение. Если у вас есть какие-либо мысли или предложения, не стесняйтесь оставлять комментарии ниже.

Вы можете подписаться на меня в Twitter , Github и LinkedIn .

Увидимся!