React.Component — класни компоненти и како функционишу

Шта је React.Component?

React.Component — апстрактна класа која пружа уграђене методе за рад са стањем, пропсима и животним циклусом компонента. Да бисте креирали класни компонент, потребно је дефинисати класу која наслеђује React.Component и имплементирати метод render.

React.Component се појавио у првој верзији React-а (2013) и остао је главни начин креирања компонената пет година. Екосистем React-а се градио око класа: компоненти вишег реда (HOC), render props, контекст — сви ови обрасци су имплементирани кроз класну синтаксу.

Са издавањем React 16.8 у 2019. години, React тим је представио хук-ове као алтернативу класама. Хук-ови су решавали исте задатке — стање, ефекти, контекст — али без наслеђивања и сложеног везивања контекста. React.Component остаје потпуно подржан, али се за нове пројекте препоручује функционални приступ.

Креирање класног компонента

Минимални класни компонент — класа са јединим методом render који враћа React елемент. render — једина обавезна метода. Мора бити чиста функција од this.props и this.state: исти скуп пропса и стања даје исти резултат.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Конструктор и иницијализација стања

Конструктор се извршава пре монтирања. У њему се позива super(props) за прослеђивање пропса родитељској класи и иницијализује се this.state. Коришћење конструктора у друге сврхе — претплате, API позиви — не препоручује се: за то постоји componentDidMount.

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

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

Управљање стањем кроз this.state и this.setState

this.state — објекат који садржи податке компонента. Директно мењање (this.state.count = 1) је забрањено — не изазива поновно рендеровање и нарушава предвидљивост. Стање се ажурира кроз this.setState, који креира нови објекат стања и покреће поновно рендеровање.

setState може примити објекат или функцију. Функционална форма је пожељнија када ново стање зависи од претходног: this.setState(prev => ({ count: prev.count + 1 })). React може груписати више setState позива у један batch ради оптимизације перформанси.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Важно својство setState — он је асинхрон. Након позива setState, стање се не ажурира тренутно. Ако је потребно извршити радњу након ажурирања, проследите callback као други аргумент: this.setState(newState, () => console.log(this.state)).

Методе животног циклуса

Класни компоненти имају предефинисане методе које React позива у одређеним тренуцима. Монтирање — constructor → render → componentDidMount. Ажурирање — render → componentDidUpdate. Демонтирање — componentWillUnmount.

ComponentDidMount — захтев података

componentDidMount — главно место за нуспојаве након првог рендеровања. Овде се извршавају HTTP захтеви, успостављају WebSocket везе и покрећу тајмери. Ако не очистите претплату у componentWillUnmount, долази до цурења меморије.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Откажи захтев при демонтирању
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

Везивање контекста this у методама

У JavaScript-у, методе класе подразумевано нису везане за инстанцу. Ако проследите методу као callback — руковаоцу догађаја, тајмеру — this ће бити undefined (у стриктном режиму) или window (без стриктног режима). Без везивања, this.setState ће бацити грешку.

Постоје три начина везивања: bind у конструктору, стреличаста функција у callback-у и class field са стреличастом функцијом. Први начин — званична препорука React-а: bind једном у конструктору, без поновног креирања функције при сваком рендеровању.

// Метода 1: bind у конструктору (препоручено)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class field — модерна синтакса са аутоматским везивањем. Стреличаста функција у својству класе хвата this из опсега видљивости конструктора. Недостатак — метода се креира на свакој инстанци, а не на прототипу, што повећава меморију за стотине компонената истог типа.

Поређење класних и функционалних компонената

Избор између класе и функције — није само питање синтаксе. Функционални компоненти са хук-овима решавају проблеме својствене класама: дуплирање логике у различитим методама животног циклуса (componentDidMount + componentDidUpdate), сложеност са this и немогућност издвајања повезане логике у блок за поновну употребу.

Функционалне компоненте је лакше тестирати — оне немају унутрашње стање (које је пре хук-ова било само у класама) и не захтевају монтирање у DOM за проверу callback-ова. React препоручује функционалне компоненте за све нове пројекте, документација и примери се пишу на њима.

Класни компоненти остају најбољи избор за рад са старим кодом. Ако је пројекат започет пре 2019. године, вероватно садржи хиљаде класних компонената. Преписивање свих у хук-ове у једном спринту је ризично. React гарантује уназадну компатибилност: класни компоненти неће бити уклоњени.

Стратегија миграције са класа на хук-ове

Постепена миграција почиње анализом компонента. Једноставни компоненти без стања (stateless) преводе се први — они се тривијално замењују функцијама. Затим — компоненти са једним-два поља стања, где useState директно замењује this.state и this.setState.

Сложени компоненти са више метода животног циклуса преводе се кроз useEffect. Логика из componentDidMount + componentDidUpdate се дели на одвојене useEffect-ове са различитим зависностима. componentWillUnmount се замењује функцијом повратка унутар useEffect-а. За сложену логику стања користите useReducer.

Алати за аутоматску миграцију — @phenomnomnominal/ts-react-class-to-hook или codemod скриптови — могу аутоматски конвертовати једноставне класе. За сложене случајеве, миграција остаје ручни рад који захтева разумевање логике оригиналног компонента.