React: компоненты класса против функциональных компонентов

В этой статье я объясню разницу между компонентами класса и функциональными компонентами после React 16.8 и объясню, почему вам, вероятно, следует чаще использовать функциональные компоненты.

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

Компонент класса:

class Hamburger extends React.Component {
  render() {
    return <h1>{this.props.cheeseType}</h1>
  }
}

Функциональный компонент:

function Hamburger(props){
  return <h1>{props.cheeseType}</h1>
}
or
const Hamburger = (props) => {
  return <h1>{props.cheeseType}</h1>
}

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

Штат

Функциональные компоненты и компоненты класса обрабатывают состояние по-разному. Функциональные компоненты на самом деле раньше назывались «компонентами без состояния», потому что они вообще не предлагали возможность устанавливать состояние. Но с появлением в React 16.8 «хуков» все изменилось.

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

Вот как состояние обрабатывается в компоненте класса:

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

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

Вот как состояние обрабатывается в функциональном компоненте:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

В этом примере мы используем «useState», новый хук, предоставленный React. Единственный аргумент useState в этом примере — это начальное состояние, которое вы хотите иметь для «count», то есть (0).

В функциональном компоненте вы можете вызывать состояние непосредственно по его имени, но в компоненте класса вы должны вызывать состояние, используя «this.state». Итак, даже с новыми обновлениями функциональные компоненты известны своей простотой!

Крючки жизненного цикла

В React 16.8 функциональные компоненты также могут реагировать на события жизненного цикла с помощью хука useEffect. Подробнее здесь.

Вывод: вам, вероятно, следует использовать функциональные компоненты

До React 16.8 варианты использования между функциональными компонентами и классовыми компонентами были очень четкими — классовые компоненты имели состояние, а функциональные компоненты были презентационными. Но с появлением хуков предпочтение отдается функциональным компонентам.

Это обычный JavaScript, они просты, требуют меньше кода и потенциально могут быть даже быстрее, чем функциональные компоненты. В более крупных приложениях React количество сохраненных строк потенциально может исчисляться тысячами с использованием функциональных компонентов, что, несомненно, ускорит ваше приложение и уменьшит размер его файла. Наряду с меньшим количеством строк кода повышается читабельность, что отлично подходит для будущего любого приложения и является главной особенностью хорошего кода. Из-за этих особенностей я определенно буду отдавать предпочтение функциональным компонентам в своих будущих проектах React!

React: компоненты класса против функциональных компонентов