Почему отказались от классовых компонентов в React?

Почему отказались от классовых компонентов в React

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

1. Хуки более интуитивны

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

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

Функциональный с хуками:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

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

2. Проблема с контекстом (this)

Классовый компонент требует привязки:

class Button extends React.Component {
  constructor(props) {
    super(props);
    // НУЖНА привязка!
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    console.log(this);  // Должен быть компонент
  }
  
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

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

function Button() {
  const handleClick = () => {
    // this не нужен, всё работает
    console.log('clicked');
  };
  
  return <button onClick={handleClick}>Click</button>;
}

3. Разбросанная логика в классах

В классах логика разбросана по разным методам жизненного цикла:

class Component extends React.Component {
  componentDidMount() {
    // Загрузка данных
    this.loadData();
    // Подписка
    this.subscribe();
  }
  
  componentDidUpdate(prevProps) {
    // Та же логика повторяется
    if (prevProps.id !== this.props.id) {
      this.loadData();
    }
  }
  
  componentWillUnmount() {
    // Очистка
    this.unsubscribe();
  }
  
  loadData() { /* ... */ }
  subscribe() { /* ... */ }
  unsubscribe() { /* ... */ }
}

С хуками логика вместе:

function Component() {
  useEffect(() => {
    loadData();
    const unsubscribe = subscribe();
    return unsubscribe;  // Очистка
  }, []);
  
  // Вся логика в одном месте
}

4. Повторное использование логики

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

Для повторного использования логики нужны:

• Higher-Order Components (HOC)
• Render Props
• Очень сложны и создают вложенность

// HOC
const withLogger = (Component) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('mounted');
    }
    render() {
      return <Component {...this.props} />;
    }
  };
};

const Enhanced = withLogger(MyComponent);

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

Просто используй кастомные хуки:

function useLogger() {
  useEffect(() => {
    console.log('mounted');
  }, []);
}

function MyComponent() {
  useLogger();
  return <div>Content</div>;
}

5. Размер bundle

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

// Классовый компонент (компилируется в большой код)
class Component extends React.Component { /* ... */ }

// Функциональный (компилируется в меньший код)
function Component() { /* ... */ }

6. Лучшая оптимизация

React.memo для функций:

const MyComponent = React.memo(({ id }) => {
  return <div>{id}</div>;
});

useMemo/useCallback для значений/функций:

const expensive = useMemo(() => compute(), [deps]);
const memoFunc = useCallback(() => {}, [deps]);

shouldComponentUpdate для классов:

Менее удобно.

7. Проще для новичков

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

• Что такое this
• Жизненный цикл
• Привязка контекста

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

• Просто функция
• Хуки внутри
• Проще для изучения

8. TypeScript лучше работает с функциями

// Классовый
class Component extends React.Component<Props, State> {
  // Усложненная типизация
}

// Функциональный
function Component({ id, name }: Props) {
  // Проще типизировать
}

Классовые компоненты ещё поддерживаются

Когда они всё ещё нужны:

// Error Boundary (для классов)
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // Обработка ошибок
  }
  
  render() {
    return this.props.children;
  }
}

Для функциональных компонентов нет встроенного Error Boundary.

Сравнение

Рекомендация

Новые проекты: используй функциональные компоненты

Старые проекты: не нужно переписывать, но новый код на функциях

Legacy код: если работает, то оставляй как есть

Вывод

Отказ от классовых компонентов произошел потому что:

• Функциональные компоненты проще и интуитивнее
• Хуки обеспечивают лучшее переиспользование логики
• Меньше кода, меньше вложенности
• Лучше работает с TypeScript
• Проще для новичков

Однако классовые компоненты всё ещё поддерживаются и используются в legacy коде.