Типы компонентов React, которые вы должны знать

Существует множество различных подходов к написанию компонентов React. Когда вы изучите множество материалов, вы заметите, что компоненты React сильно различаются в разных источниках. Тем не менее, все компоненты происходят от функциональных и классных компонентов, что является основой. Итак, сегодня в этой статье я хочу показать вам, что могут делать компоненты React, описав различные типы компонентов.

Что такое компонент React?
Компонент React - это один из основных строительных блоков приложений React. Другими словами, можно сказать, что каждое приложение, которое вы будете разрабатывать на React, будет состоять из частей, называемых компонентами. Компоненты значительно упрощают задачу создания пользовательского интерфейса.

Каждый компонент возвращает/выдает некоторый JSX-код, и он определяет, какой HTML-код React должен в конечном итоге отобразить в реальном DOM. JSX - это не HTML, но он очень похож на него. В React у нас в основном два типа компонентов: Функциональные компоненты и компоненты классов

Однако в React есть и другие компоненты, которые похожи на эти два компонента, и сегодня мы поговорим и о них и что под этими компонентами подразумевается.

Компоненты React

1] Функциональные компоненты

Простыми словами, функциональные компоненты - это функции JavaScript. Написав функцию JavaScript, мы можем создать функциональный компонент в React. Чтобы сделать приложение React эффективным, мы используем функциональный компонент только тогда, когда уверены, что нашему компоненту не нужно взаимодействовать с другими компонентами. Функциональные компоненты не требуют данных от других компонентов. Ниже показан пример функционального компонента:

function Title() {
    return <h1>I am Title</h1>;
}

2] Компоненты класса

Компоненты класса похожи на функциональные компоненты, но имеют некоторые дополнительные возможности, которые делают компоненты класса немного сложнее функциональных компонентов. Функциональные компоненты не заботятся о других компонентах вашего приложения, в то время как компоненты класса могут работать друг с другом. Мы можем передавать данные от одного компонента класса к другому компоненту класса. Ниже показан пример компонента класса в React:

class Title extends React.Component {
    render() {
          return <h1>I am Title</h1>;
    }
}

3] Компоненты высшего порядка

Компоненты высшего порядка, или известные под аббревиатурой HOCs - это компоненты, которые принимают компонент на вход и возвращают компонент на выход, но с расширенными функциональными возможностями. React Higher-Order Components - это популярный продвинутый паттерн React для развертывания многократно используемой логики и функциональности в компонентах React. Ниже показан пример компонента высшего порядка, который преобразует и возвращает имена пользователей в верхнем регистре:

const hoc = (MyComponent) => (props) => {
  return (
    <div>
      <MyComponent {...props}>
        {props.children.toUpperCase()}
      </MyComponent>
    </div>
  )
}

4] Глупые компоненты

Глупый компонент можно легко определить как функциональный компонент без состояния. Компонент без состояния гораздо эффективнее, чем компонент с состоянием, поскольку для его рендеринга не требуется так много компьютерных ресурсов (память, CPU и GPU в приложениях с интенсивной графикой). Ниже показан пример глупого компонента в React:

export default Title => () => (
  <h1>I am Title</h1>
);

5] Умные компоненты

Умный компонент - это любой компонент класса, который управляет своим состоянием. Умные компоненты - это компоненты с состоянием и работают аналогично компонентам класса. При работе с Babel или React в стиле ES6 мы привыкли понимать под этим любой объект класса, который расширяет Component, также компонент может быть записан и в функциональном стиле.
Ниже показан пример умного компонента в React, где `Other.Component` заботится о состоянии компонента:

export default title => class MyComponent extends Other.Component {
  render() {
    return (
      <div>
        <h1>Your Cart</h1>
        <ShoppingCart cart={ this.state.cart } onItemRemove={ this.removeCartItem } onItemChangeQty={ this.changeCartItemQty } />
        <ShippingInfo cart={ this.state.cart } address={ this.state.userShippingAddress }/>
        <BuyNowButton cart={ this.state.cart } onBuyClick={ this.cartPurchased } />
      </div>
    );
  }
}

6] Презентационные компоненты

Презентационные компоненты часто называют функциональным компонентом без состояния, который принимает параметры (пропсы) и отображает пользовательский интерфейс. Функциональные компоненты без состояния - это обычные функции JavaScript, которые не имеют состояния. Компоненты, которые получают состояние от компонента более высокого порядка, будут работать как презентационные компоненты. Состояние передается им, и они условно отображают пользовательский интерфейс на его основе. Они не занимаются управлением состояния. Презентационный компонент в основном заботится о том, как все выглядит. Ниже показан пример презентационного компонента в React:

const List = props => (<ul>
  {props.list.map(user => (<li>{items}</li>))}
</ul>)

7] Контейнерные компоненты

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

Контейнерные компоненты вызывают потоковые действия и предоставляют их в качестве обратного вызова презентационному компоненту. Ниже показан пример презентационного компонента в React:

class ListContainer extends React.Component{
  constructor() {  
    this.state = {    
       items: []     
    } 
  }  
  componentDidMount() {    
    axios.get('/list').then(
       items => this.setState({ list: items }))     
    )  
  } 
  render() { 
    return <Users users={this.state.items} />   
  }
}

Итак, это те компоненты React, о которых вы должны знать.
Eсли вам понравилась эта статья, пожалуйста, поделитесь ею.

Источник: https://medium.com/wesionary-team/types-of-react-components-you-should-know-251cceacd8ac