Мое путешествие по React началось четыре года назад с функциональных компонентов и хуков. Затем появился Сисве, один из участников учебного курса и наш постоянный энтузиаст компонентов. В то время как остальные из нас работали над командными проектами с функциональными компонентами, «Сисве с непоколебимой преданностью цеплялся за классовые компоненты».

Компоненты — это строительные блоки вашего пользовательского интерфейса (UI).

Думайте о них как о кубиках Lego: вы можете комбинировать их по-разному, создавая сложные конструкции. Это независимые и многократно используемые фрагменты кода, инкапсулирующие пользовательский интерфейс и логику.

Повторное использование компонента внутри другого компонента обычно выглядит так:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
  );
}

Компоненты класса и функциональные компоненты — два основных способа создания компонентов в React.

import React, { Component } from 'react';

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

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

Это компонент класса, созданный с использованием классов JavaScript, расширяющих класс React.Component.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

С другой стороны, это функциональный компонент, написанный как простая функция JavaScript.

Управление состоянием: основное отличие.

Компоненты класса управляют своим внутренним состоянием с помощью this.state. Обычно он инициализируется в конструкторе, доступ к нему осуществляется с помощью объекта this.state и обновляется с помощью метода this.setState, как показано в блоке кода выше.

Функциональные компоненты изначально не имели состояния. Но с появлением хуков они получили возможность управлять логикой состояний и жизненного цикла. Используя хук useState для управления состоянием, он возвращает пару значений: текущее состояние и функцию для его обновления, как показано выше. Этого достаточно для простого управления состоянием. Для более сложной логики состояния, включающей несколько подзначений, или когда следующее состояние зависит от предыдущего, вы можете использовать useReducer.
Например:

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

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

Избегайте прямых манипуляций с объектом состояния в обоих компонентах.

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

Пример функционального компонента:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

Пример компонента класса:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

В обоих примерах мы обновляем свойство name объекта пользователя, сохраняя при этом целостность исходного объекта. Это гарантирует создание нового объекта состояния, сохраняя неизменность и предотвращая потенциальные проблемы с обновлениями состояния. Соблюдение этого правила обеспечивает предсказуемое поведение, оптимизацию производительности и упрощение отладки.

Компоненты класса предназначены для сложной логики.

• Сложное управление состоянием: При работе со сложной логикой состояний, требующей детального управления, компоненты классов с this.state и this.setState могут обеспечить большую гибкость.
• Методы жизненного цикла: Для компонентов, которые в значительной степени полагаются на методы жизненного цикла, такие как компонентDidMount, компонентDidUpdate или компонентWillUnmount, компоненты класса являются традиционным выбором.
• Границы ошибок: Для обработки ошибок в дереве компонентов и предотвращения сбоев необходимы компоненты класса с компонентомComponentDidCatch.
• Оптимизация производительности: В определенных сценариях, критичных к производительности, можно использовать PureComponent или mustComponentUpdate внутри компонентов класса.
• Устаревшие кодовые базы: Если вы работаете над существующим проектом, который в значительной степени зависит от компонентов классов, возможно, будет проще поддерживать согласованность, используя их для новых компонентов.

Функциональные компоненты предназначены для простых представлений.

• Простые компоненты: Для презентационных компонентов с минимальным состоянием или логикой функциональные компоненты часто являются предпочтительным выбором из-за их простоты и удобочитаемости.
• Управление состоянием с помощью хуков: Использование useState и useReducer в функциональных компонентах обеспечивает мощный и гибкий способ управления состоянием.
• Побочные эффекты: Хук useEffect позволяет управлять побочными эффектами, такими как выборка данных, подписки или ручные манипуляции с DOM (объектной моделью документа).
• Оптимизация производительности: useMemo и useCallback можно использовать для оптимизации производительности функциональных компонентов.

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

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

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

С каким компонентом вам больше нравится работать?