React.Component — mga class component at kung paano gumagana ang mga ito

Ano ang React.Component?

React.Component — isang abstract na klase na nagbibigay ng mga built-in na method para sa pagtatrabaho sa state, props, at lifecycle ng component. Upang lumikha ng class component, kailangan mong tukuyin ang isang klase na nagmamana mula sa React.Component at ipatupad ang render method.

Ang React.Component ay lumitaw sa unang bersyon ng React (2013) at nanatiling pangunahing paraan ng paggawa ng mga component sa loob ng limang taon. Ang React ecosystem ay binuo sa paligid ng mga klase: higher-order components (HOC), render props, konteksto — lahat ng mga pattern na ito ay ipinatupad sa pamamagitan ng class syntax.

Sa paglabas ng React 16.8 noong 2019, ipinakilala ng React team ang hooks bilang alternatibo sa mga klase. Ang hooks ay nalutas ang parehong mga gawain — state, effects, konteksto — ngunit walang inheritance at kumplikadong pagbind ng konteksto. Ang React.Component ay nananatiling ganap na sinusuportahan, ngunit para sa mga bagong proyekto ang functional na diskarte ay inirerekomenda.

Paggawa ng class component

Isang minimal na class component — isang klase na may iisang render method na nagbabalik ng React element. render — ang tanging mandatoryong method. Dapat itong maging isang pure function ng this.props at this.state: ang parehong set ng props at state ay nagbibigay ng parehong resulta.

import React, { Component } from 'react';

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

Constructor at pagsisimula ng state

Ang constructor ay isinasagawa bago ang mounting. Dito, ang super(props) ay tinatawag upang ipasa ang props sa parent class at ang this.state ay sinisimulan. Ang paggamit ng constructor para sa ibang mga layunin — mga subscription, API tawag — ay hindi inirerekomenda: para doon ay may componentDidMount.

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

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

Pamamahala ng state sa pamamagitan ng this.state at this.setState

this.state — ang object na naglalaman ng data ng component. Ang direktang pagbabago nito (this.state.count = 1) ay bawal — hindi ito nagdudulot ng re-render at sinisira ang predictability. Ang state ay dapat i-update sa pamamagitan ng this.setState, na lumilikha ng bagong state object at nag-trigger ng re-render.

Ang setState ay maaaring tumanggap ng object o function. Ang functional form ay mas gusto kapag ang bagong state ay nakadepende sa nauna: this.setState(prev => ({ count: prev.count + 1 })). Maaaring pagsama-samahin ng React ang maraming setState sa isang batch para sa pag-optimize ng performance.

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>
    );
  }
}

Isang mahalagang katangian ng setState — ito ay asynchronous. Pagkatapos tawagan ang setState, ang state ay hindi agad nag-a-update. Kung kailangan mong magsagawa ng aksyon pagkatapos ng update, magbigay ng callback bilang pangalawang argumento: this.setState(newState, () => console.log(this.state)).

Mga lifecycle method

Ang mga class component ay may mga paunang natukoy na method na tinatawag ng React sa mga tiyak na sandali. Mounting — constructor → render → componentDidMount. Pag-update — render → componentDidUpdate. Unmounting — componentWillUnmount.

ComponentDidMount — pagkuha ng data

componentDidMount — ang pangunahing lugar para sa side effects pagkatapos ng unang render. Dito isinasagawa ang mga HTTP request, itinatag ang WebSocket connections, at sinisimulan ang mga timer. Kung hindi mo lilinisin ang subscription sa componentWillUnmount, magkakaroon ng memory leak.

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

  componentWillUnmount() {
    // Kanselahin ang request sa unmount
  }

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

Pagbind ng konteksto ng this sa mga method

Sa JavaScript, ang mga method ng klase ay hindi naka-bind sa instance bilang default. Kung ipapasa mo ang isang method bilang callback — sa event handler, timer — ang this ay magiging undefined (sa strict mode) o window (walang strict mode). Kung walang binding, ang this.setState ay magtatapon ng error.

Mayroong tatlong paraan ng pagbind: bind sa constructor, arrow function sa callback, at class field na may arrow function. Ang unang paraan — opisyal na rekomendasyon ng React: bind isang beses sa constructor, nang hindi muling ginagawa ang function sa bawat render.

// Paraan 1: bind sa constructor (inirerekomenda)
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 — modernong syntax na may awtomatikong pagbind. Ang arrow function sa property ng klase ay kumukuha ng this mula sa scope ng constructor. Ang disadvantage — ang method ay nilikha sa bawat instance, hindi sa prototype, na nagpapataas ng memory para sa daan-daang component ng parehong uri.

Paghahambing ng class at functional component

Ang pagpili sa pagitan ng klase at function — hindi lamang isang usapin ng syntax. Ang mga functional component na may hooks ay lumulutas ng mga problemang likas sa mga klase: pagdodoble ng lohika sa iba't ibang lifecycle method (componentDidMount + componentDidUpdate), pagiging kumplikado sa this, at kawalan ng kakayahang kunin ang kaugnay na lohika sa isang reusable na bloke.

Ang mga functional component ay mas madaling subukan — wala silang internal state (na bago ang hooks ay nasa mga klase lamang) at hindi nangangailangan ng mounting sa DOM para sa pagsusuri ng mga callback. Inirerekomenda ng React ang mga functional component para sa lahat ng bagong proyekto, ang dokumentasyon at mga halimbawa ay isinulat gamit ang mga ito.

Ang mga class component ay nananatiling pinakamahusay na pagpipilian kapag nagtatrabaho sa lumang code. Kung ang proyekto ay sinimulan bago ang 2019, malamang na naglalaman ito ng libu-libong class component. Ang pagsulat muli ng lahat ng ito sa hooks sa isang sprint ay mapanganib. Ginagarantiya ng React ang backward compatibility: ang mga class component ay hindi tatanggalin.

Estratehiya ng migrasyon mula sa klase patungo sa hooks

Ang paunti-unting migrasyon ay nagsisimula sa pagsusuri ng component. Ang mga simpleng component na walang state (stateless) ay isinasalin muna — ang mga ito ay madaling mapalitan ng mga function. Pagkatapos — mga component na may isa-dalawang state field, kung saan ang useState ay direktang pumapalit sa this.state at this.setState.

Ang mga kumplikadong component na may maraming lifecycle method ay isinasalin sa pamamagitan ng useEffect. Ang lohika mula sa componentDidMount + componentDidUpdate ay hinahati sa magkakahiwalay na useEffect na may iba't ibang dependencies. Ang componentWillUnmount ay pinapalitan ng return function sa loob ng useEffect. Para sa kumplikadong state logic, gamitin ang useReducer.

Mga tool para sa awtomatikong migrasyon — @phenomnomnominal/ts-react-class-to-hook o mga codemod script — ay maaaring awtomatikong mag-convert ng mga simpleng klase. Para sa mga kumplikadong kaso, ang migrasyon ay nananatiling manu-manong gawain na nangangailangan ng pag-unawa sa lohika ng orihinal na component.