Component

class Greeting extends Component {
  render() {
    return <h1>வணக்கம், {this.props.name}!</h1>;
  }
}

• Reference
  • Component
  • context
  • props
  • state
  • constructor(props)
  • componentDidCatch(error, info)
  • componentDidMount()
  • componentDidUpdate(prevProps, prevState, snapshot?)
  • componentWillMount()
  • componentWillReceiveProps(nextProps)
  • componentWillUpdate(nextProps, nextState)
  • componentWillUnmount()
  • forceUpdate(callback?)
  • getSnapshotBeforeUpdate(prevProps, prevState)
  • render()
  • setState(nextState, callback?)
  • shouldComponentUpdate(nextProps, nextState, nextContext)
  • UNSAFE_componentWillMount()
  • UNSAFE_componentWillReceiveProps(nextProps, nextContext)
  • UNSAFE_componentWillUpdate(nextProps, nextState)
  • static contextType
  • static defaultProps
  • static getDerivedStateFromError(error)
  • static getDerivedStateFromProps(props, state)
• Usage
  • Defining a class component
  • Adding state to a class component
  • Class component-க்கு lifecycle methods சேர்த்தல்
  • Error Boundary மூலம் rendering errors catch செய்தல்
• Alternatives
  • Simple component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்
  • State கொண்ட component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்
  • Lifecycle methods கொண்ட component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்
  • Context கொண்ட component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்

Reference

Component

React component ஒன்றை class ஆக define செய்ய, built-in Component class-ஐ extend செய்து render method define செய்யுங்கள்:

import { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>வணக்கம், {this.props.name}!</h1>;
  }
}

render method மட்டுமே required; மற்ற methods optional.

மேலும் examples கீழே பார்க்கவும்.

context

Class component-ன் context this.context ஆக கிடைக்கும். static contextType பயன்படுத்தி எந்த context-ஐ receive செய்ய வேண்டும் என்பதை specify செய்தால் மட்டுமே அது கிடைக்கும்.

Class component ஒரே நேரத்தில் ஒரு context மட்டும் read செய்ய முடியும்.

class Button extends Component {
  static contextType = ThemeContext;

  render() {
    const theme = this.context;
    const className = 'button-' + theme;
    return (
      <button className={className}>
        {this.props.children}
      </button>
    );
  }
}

props

Class component-க்கு pass செய்யப்பட்ட props this.props ஆக கிடைக்கும்.

class Greeting extends Component {
  render() {
    return <h1>வணக்கம், {this.props.name}!</h1>;
  }
}

<Greeting name="Taylor" />

state

Class component-ன் state this.state ஆக கிடைக்கும். state field object ஆக இருக்க வேண்டும். State-ஐ நேரடியாக mutate செய்ய வேண்டாம். State-ஐ மாற்ற விரும்பினால், புதிய state உடன் setState call செய்யுங்கள்.

class Counter extends Component {
  state = {
    age: 42,
  };

  handleAgeChange = () => {
    this.setState({
      age: this.state.age + 1
    });
  };

  render() {
    return (
      <>
        <button onClick={this.handleAgeChange}>
        வயதை அதிகரி
        </button>
        <p>உங்கள் வயது {this.state.age}.</p>
      </>
    );
  }
}

constructor(props)

Constructor உங்கள் class component mount ஆகும் முன் (screen-க்கு add ஆகும் முன்) run ஆகும். React-இல் constructor பொதுவாக இரண்டு purposes-க்காக மட்டுமே use செய்யப்படும். அது state declare செய்யவும், உங்கள் class methods-ஐ class instance-க்கு bind செய்யவும் அனுமதிக்கிறது:

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

  handleClick() {
    // ...
  }

Modern JavaScript syntax use செய்தால், constructors அரிதாகவே தேவைப்படும். அதற்கு பதிலாக, modern browsers மற்றும் Babel போன்ற tools இரண்டாலும் supported ஆன public class field syntax பயன்படுத்தி மேலுள்ள code-ஐ rewrite செய்யலாம்:

class Counter extends Component {
  state = { counter: 0 };

  handleClick = () => {
    // ...
  }

Constructor-இல் side effects அல்லது subscriptions இருக்கக்கூடாது.

Parameters

• props: Component-ன் initial props.

Returns

constructor எதையும் return செய்யக்கூடாது.

Caveats

• Constructor-இல் side effects அல்லது subscriptions எதையும் run செய்ய வேண்டாம். அதற்கு componentDidMount use செய்யுங்கள்.

• Constructor-க்குள், வேறு எந்த statement-க்கும் முன் super(props) call செய்ய வேண்டும். அதை செய்யாவிட்டால், constructor run ஆகும் போது this.props undefined ஆக இருக்கும்; இது குழப்பத்தையும் bugs-ஐயும் ஏற்படுத்தலாம்.

• this.state-ஐ நேரடியாக assign செய்யக்கூடிய ஒரே இடம் constructor. மற்ற எல்லா methods-இலும் அதற்கு பதிலாக this.setState() use செய்ய வேண்டும். Constructor-இல் setState call செய்ய வேண்டாம்.

• Server rendering use செய்தால், constructor server-இலும் run ஆகும்; அதன் பிறகு render method run ஆகும். ஆனால் componentDidMount அல்லது componentWillUnmount போன்ற lifecycle methods server-இல் run ஆகாது.

• Strict Mode on ஆக இருந்தால், development-இல் React constructor-ஐ இருமுறை call செய்து, பின்னர் instances-இல் ஒன்றை throw away செய்யும். constructor-இலிருந்து move செய்ய வேண்டிய accidental side effects-ஐ கவனிக்க இது உதவும்.

componentDidCatch(error, info)

நீங்கள் componentDidCatch define செய்தால், rendering போது எந்த child component (தொலைவில் உள்ள children உட்பட) error throw செய்தாலும் React அதை call செய்யும். Production-இல் அந்த error-ஐ error reporting service-க்கு log செய்ய இது அனுமதிக்கிறது.

பொதுவாக, error-க்கு response ஆக state update செய்து user-க்கு error message display செய்ய அனுமதிக்கும் static getDerivedStateFromError உடன் இது சேர்த்து use செய்யப்படுகிறது. இந்த methods கொண்ட component Error Boundary என்று அழைக்கப்படுகிறது.

ஒரு example பார்க்கவும்.

Parameters

• error: Throw செய்யப்பட்ட error. நடைமுறையில், இது பொதுவாக Error instance ஆக இருக்கும்; ஆனால் இது guaranteed அல்ல, ஏனெனில் JavaScript strings அல்லது null உட்பட எந்த value-யையும் throw செய்ய அனுமதிக்கிறது.

• info: Error பற்றிய additional information கொண்ட object. அதன் componentStack field-இல் throw செய்த component மற்றும் அதன் parent components அனைத்தின் names மற்றும் source locations கொண்ட stack trace இருக்கும். Production-இல் component names minified ஆகும். Production error reporting set up செய்தால், regular JavaScript error stacks போலவே sourcemaps பயன்படுத்தி component stack-ஐ decode செய்யலாம்.

Returns

componentDidCatch எதையும் return செய்யக்கூடாது.

Caveats

• கடந்த காலத்தில், UI-ஐ update செய்து fallback error message display செய்ய componentDidCatch-க்குள் setState call செய்வது பொதுவாக இருந்தது. static getDerivedStateFromError define செய்வதற்கு ஆதரவாக இது deprecated.

• React-ன் production மற்றும் development builds componentDidCatch errors handle செய்வதில் சிறிது வேறுபடும். Development-இல், errors window-க்கு bubble up ஆகும்; அதாவது window.onerror அல்லது window.addEventListener('error', callback) எதுவாக இருந்தாலும் componentDidCatch catch செய்த errors-ஐ intercept செய்யும். Production-இல், errors bubble up ஆகாது; அதாவது ancestor error handler componentDidCatch explicit ஆக catch செய்யாத errors-ஐ மட்டுமே receive செய்யும்.

componentDidMount()

நீங்கள் componentDidMount method define செய்தால், உங்கள் component screen-க்கு add (mounted) ஆகும்போது React அதை call செய்யும். Data fetching தொடங்க, subscriptions set up செய்ய, அல்லது DOM nodes manipulate செய்ய இது பொதுவான இடம்.

componentDidMount implement செய்தால், bugs தவிர்க்க பொதுவாக மற்ற lifecycle methods-யும் implement செய்ய வேண்டும். உதாரணமாக, componentDidMount சில state அல்லது props read செய்தால், அவற்றின் changes handle செய்ய componentDidUpdate-ஐயும், componentDidMount செய்ததை clean up செய்ய componentWillUnmount-ஐயும் implement செய்ய வேண்டும்.

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  // ...
}

மேலும் examples பார்க்கவும்.

Parameters

componentDidMount எந்த parameters-யும் எடுக்காது.

Returns

componentDidMount எதையும் return செய்யக்கூடாது.

Caveats

• Strict Mode on ஆக இருந்தால், development-இல் React componentDidMount-ஐ call செய்து, உடனே componentWillUnmount-ஐ call செய்து, பின்னர் componentDidMount-ஐ மீண்டும் call செய்யும். componentWillUnmount implement செய்ய மறந்தீர்களா அல்லது அதன் logic componentDidMount செய்வதை முழுமையாக “mirror” செய்யவில்லையா என்பதை கவனிக்க இது உதவும்.

• componentDidMount-இல் உடனே setState call செய்யலாம் என்றாலும், முடிந்தவரை அதை தவிர்ப்பது சிறந்தது. அது கூடுதல் rendering trigger செய்யும்; ஆனால் browser screen update செய்வதற்கு முன் அது நடக்கும். இதனால் இந்த case-இல் render இருமுறை call செய்யப்பட்டாலும், user intermediate state-ஐ பார்க்கமாட்டார். இந்த pattern பெரும்பாலும் performance issues ஏற்படுத்துவதால் கவனமாக use செய்யுங்கள். பெரும்பாலான cases-இல், initial state-ஐ அதற்கு பதிலாக constructor-இல் assign செய்ய முடியும். ஆனால் size அல்லது position-ஐ சார்ந்த ஏதாவது render செய்வதற்கு முன் DOM node-ஐ measure செய்ய வேண்டிய modals மற்றும் tooltips போன்ற cases-இல் இது தேவைப்படலாம்.

componentDidUpdate(prevProps, prevState, snapshot?)

நீங்கள் componentDidUpdate method define செய்தால், உங்கள் component updated props அல்லது state உடன் re-render ஆன உடனே React அதை call செய்யும். இந்த method initial render-க்கு call செய்யப்படாது.

Update-க்கு பிறகு DOM manipulate செய்ய இதை use செய்யலாம். Current props-ஐ previous props உடன் compare செய்கிறவரை network requests செய்யவும் இது பொதுவான இடம் (எ.கா. props மாறவில்லை என்றால் network request தேவையில்லாமல் இருக்கலாம்). பொதுவாக, இதை componentDidMount மற்றும் componentWillUnmount உடன் சேர்த்து use செய்வீர்கள்:

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  // ...
}

மேலும் examples பார்க்கவும்.

Parameters

• prevProps: Update-க்கு முந்தைய props. என்ன மாறியது என்பதை தீர்மானிக்க prevProps-ஐ this.props உடன் compare செய்யுங்கள்.

• prevState: Update-க்கு முந்தைய state. என்ன மாறியது என்பதை தீர்மானிக்க prevState-ஐ this.state உடன் compare செய்யுங்கள்.

• snapshot: நீங்கள் getSnapshotBeforeUpdate implement செய்திருந்தால், அந்த method-இலிருந்து return செய்த value snapshot-இல் இருக்கும். இல்லையெனில் அது undefined ஆக இருக்கும்.

Returns

componentDidUpdate எதையும் return செய்யக்கூடாது.

Caveats

• shouldComponentUpdate defined ஆகி false return செய்தால் componentDidUpdate call செய்யப்படாது.

• componentDidUpdate-க்குள் உள்ள logic பொதுவாக this.props-ஐ prevProps உடனும், this.state-ஐ prevState உடனும் compare செய்யும் conditions-இல் wrap செய்யப்பட வேண்டும். இல்லையெனில் infinite loops உருவாகும் risk உள்ளது.

• componentDidUpdate-இல் உடனே setState call செய்யலாம் என்றாலும், முடிந்தவரை அதை தவிர்ப்பது சிறந்தது. அது கூடுதல் rendering trigger செய்யும்; ஆனால் browser screen update செய்வதற்கு முன் அது நடக்கும். இதனால் இந்த case-இல் render இருமுறை call செய்யப்பட்டாலும், user intermediate state-ஐ பார்க்கமாட்டார். இந்த pattern பெரும்பாலும் performance issues ஏற்படுத்தும்; ஆனால் size அல்லது position-ஐ சார்ந்த ஏதாவது render செய்வதற்கு முன் DOM node-ஐ measure செய்ய வேண்டிய modals மற்றும் tooltips போன்ற அரிதான cases-இல் இது தேவைப்படலாம்.

componentWillMount()

componentWillReceiveProps(nextProps)

componentWillUpdate(nextProps, nextState)

componentWillUnmount()

நீங்கள் componentWillUnmount method define செய்தால், உங்கள் component screen-இலிருந்து remove (unmounted) ஆகும் முன் React அதை call செய்யும். Data fetching cancel செய்ய அல்லது subscriptions remove செய்ய இது பொதுவான இடம்.

componentWillUnmount-க்குள் உள்ள logic componentDidMount-க்குள் உள்ள logic-ஐ “mirror” செய்ய வேண்டும். உதாரணமாக, componentDidMount subscription ஒன்றை set up செய்தால், componentWillUnmount அந்த subscription-ஐ clean up செய்ய வேண்டும். உங்கள் componentWillUnmount cleanup logic சில props அல்லது state read செய்தால், பழைய props மற்றும் state-க்கு corresponding ஆன resources-ஐ (subscriptions போன்றவை) clean up செய்ய பொதுவாக componentDidUpdate-ஐயும் implement செய்ய வேண்டும்.

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  // ...
}

மேலும் examples பார்க்கவும்.

Parameters

componentWillUnmount எந்த parameters-யும் எடுக்காது.

Returns

componentWillUnmount எதையும் return செய்யக்கூடாது.

Caveats

• Strict Mode on ஆக இருந்தால், development-இல் React componentDidMount-ஐ call செய்து, உடனே componentWillUnmount-ஐ call செய்து, பின்னர் componentDidMount-ஐ மீண்டும் call செய்யும். componentWillUnmount implement செய்ய மறந்தீர்களா அல்லது அதன் logic componentDidMount செய்வதை முழுமையாக “mirror” செய்யவில்லையா என்பதை கவனிக்க இது உதவும்.

forceUpdate(callback?)

Component-ஐ re-render செய்ய force செய்கிறது.

பொதுவாக, இது தேவையில்லை. உங்கள் component-ன் render method this.props, this.state, அல்லது this.context-இலிருந்து மட்டும் read செய்தால், உங்கள் component அல்லது அதன் parents ஒன்றுக்குள் setState call செய்யும் போது அது automatic ஆக re-render ஆகும். ஆனால் உங்கள் component-ன் render method external data source-இலிருந்து நேரடியாக read செய்தால், அந்த data source மாறும்போது user interface update செய்ய React-க்கு சொல்ல வேண்டும். அதையே forceUpdate செய்ய அனுமதிக்கிறது.

forceUpdate use செய்வதை எல்லாம் தவிர்க்க முயற்சிக்கவும்; render-இல் this.props மற்றும் this.state-இலிருந்து மட்டும் read செய்யுங்கள்.

Parameters

• optional callback: Specify செய்தால், update committed ஆன பிறகு நீங்கள் provided செய்த callback-ஐ React call செய்யும்.

Returns

forceUpdate எதையும் return செய்யாது.

Caveats

• நீங்கள் forceUpdate call செய்தால், shouldComponentUpdate call செய்யாமல் React re-render செய்யும்.

getSnapshotBeforeUpdate(prevProps, prevState)

நீங்கள் getSnapshotBeforeUpdate implement செய்தால், React DOM update செய்வதற்கு உடனடியாக முன் React அதை call செய்யும். DOM மாறக்கூடும் முன் அதிலிருந்து சில information-ஐ (எ.கா. scroll position) capture செய்ய இது உங்கள் component-க்கு உதவும். இந்த lifecycle method return செய்யும் எந்த value-யும் componentDidUpdate-க்கு parameter ஆக pass செய்யப்படும்.

உதாரணமாக, updates போது தனது scroll position-ஐ preserve செய்ய வேண்டிய chat thread போன்ற UI-இல் இதை use செய்யலாம்:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

மேலுள்ள example-இல், scrollHeight property-ஐ getSnapshotBeforeUpdate-இல் நேரடியாக read செய்வது முக்கியம். அதை render, UNSAFE_componentWillReceiveProps, அல்லது UNSAFE_componentWillUpdate-இல் read செய்வது safe அல்ல; ஏனெனில் இந்த methods call செய்யப்படுவதற்கும் React DOM update செய்வதற்கும் இடையில் time gap இருக்கலாம்.

Parameters

• prevProps: Update-க்கு முந்தைய props. என்ன மாறியது என்பதை தீர்மானிக்க prevProps-ஐ this.props உடன் compare செய்யுங்கள்.

• prevState: Update-க்கு முந்தைய state. என்ன மாறியது என்பதை தீர்மானிக்க prevState-ஐ this.state உடன் compare செய்யுங்கள்.

Returns

நீங்கள் விரும்பும் எந்த type-இலும் snapshot value ஒன்றை அல்லது null-ஐ return செய்ய வேண்டும். நீங்கள் return செய்த value componentDidUpdate-க்கு மூன்றாவது argument ஆக pass செய்யப்படும்.

Caveats

• shouldComponentUpdate defined ஆகி false return செய்தால் getSnapshotBeforeUpdate call செய்யப்படாது.

render()

Class component-இல் required ஆன ஒரே method render method.

Screen-இல் என்ன தோன்ற வேண்டும் என்பதை render method specify செய்ய வேண்டும், உதாரணமாக:

import { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>வணக்கம், {this.props.name}!</h1>;
  }
}

React எந்த தருணத்திலும் render call செய்யலாம்; எனவே அது குறிப்பிட்ட நேரத்தில் run ஆகும் என்று assume செய்யக்கூடாது. பொதுவாக, render method JSX பகுதியை return செய்ய வேண்டும்; ஆனால் strings போன்ற சில மற்ற return types supported. Returned JSX-ஐ calculate செய்ய, render method this.props, this.state, மற்றும் this.context-ஐ read செய்யலாம்.

render method-ஐ pure function ஆக எழுத வேண்டும்; அதாவது props, state, மற்றும் context ஒரே மாதிரி இருந்தால் அது அதே result-ஐ return செய்ய வேண்டும். அதில் subscriptions set up செய்வது போன்ற side effects இருக்கக்கூடாது; browser APIs உடன் interact செய்யக்கூடாது. Side effects event handlers-இலோ அல்லது componentDidMount போன்ற methods-இலோ நடக்க வேண்டும்.

Parameters

render எந்த parameters-யும் எடுக்காது.

Returns

render எந்த valid React node-ஐயும் return செய்யலாம். இதில் <div /> போன்ற React elements, strings, numbers, portals, empty nodes (null, undefined, true, மற்றும் false), மற்றும் React nodes arrays அடங்கும்.

Caveats

• render props, state, மற்றும் context-ன் pure function ஆக எழுதப்பட வேண்டும். அதில் side effects இருக்கக்கூடாது.

• shouldComponentUpdate defined ஆகி false return செய்தால் render call செய்யப்படாது.

• Strict Mode on ஆக இருந்தால், development-இல் React render-ஐ இருமுறை call செய்து, பின்னர் results-இல் ஒன்றை throw away செய்யும். render method-இலிருந்து move செய்ய வேண்டிய accidental side effects-ஐ கவனிக்க இது உதவும்.

• render call மற்றும் பின்னர் வரும் componentDidMount அல்லது componentDidUpdate call இடையே one-to-one correspondence இல்லை. பயனுள்ளதாக இருந்தால் சில render call results-ஐ React discard செய்யலாம்.

setState(nextState, callback?)

உங்கள் React component-ன் state update செய்ய setState call செய்யுங்கள்.

class Form extends Component {
  state = {
    name: 'Taylor',
  };

  handleNameChange = (e) => {
    const newName = e.target.value;
    this.setState({
      name: newName
    });
  }

  render() {
    return (
      <>
        <input value={this.state.name} onChange={this.handleNameChange} />
        <p>வணக்கம், {this.state.name}.</p>
      </>
    );
  }
}

setState component state-க்கு changes-ஐ enqueue செய்கிறது. இந்த component மற்றும் அதன் children புதிய state உடன் re-render ஆக வேண்டும் என்று அது React-க்கு சொல்கிறது. Interactions-க்கு response ஆக user interface update செய்யும் முக்கியமான வழி இதுதான்.

function handleClick() {
  console.log(this.state.name); // "Taylor"
  this.setState({
    name: 'Robin'
  });
  console.log(this.state.name); // இன்னும் "Taylor" தான்!
}

setState-க்கு function ஒன்றையும் pass செய்யலாம். Previous state அடிப்படையில் state update செய்ய இது அனுமதிக்கிறது:

  handleIncreaseAge = () => {
    this.setState(prevState => {
      return {
        age: prevState.age + 1
      };
    });
  }

இதை செய்ய வேண்டிய கட்டாயம் இல்லை; ஆனால் அதே event நேரத்தில் state-ஐ பல முறை update செய்ய விரும்பினால் இது பயனுள்ளதாக இருக்கும்.

Parameters

• nextState: Object அல்லது function.

  • nextState ஆக object pass செய்தால், அது this.state-க்குள் shallowly merged செய்யப்படும்.
  • nextState ஆக function pass செய்தால், அது updater function ஆக treat செய்யப்படும். அது pure ஆக இருக்க வேண்டும், pending state மற்றும் props-ஐ arguments ஆக எடுக்க வேண்டும், மேலும் this.state-க்குள் shallowly merge செய்யப்படும் object-ஐ return செய்ய வேண்டும். React உங்கள் updater function-ஐ queue-இல் வைத்து component-ஐ re-render செய்யும். அடுத்த render போது, queued updaters அனைத்தையும் previous state-க்கு apply செய்து next state-ஐ React calculate செய்யும்.

• optional callback: Specify செய்தால், update committed ஆன பிறகு நீங்கள் provided செய்த callback-ஐ React call செய்யும்.

Returns

setState எதையும் return செய்யாது.

Caveats

• setState-ஐ component update செய்யும் immediate command ஆக அல்ல, ஒரு request ஆக நினைக்கவும். பல components ஒரு event-க்கு response ஆக தங்கள் state-ஐ update செய்தால், React அவற்றின் updates-ஐ batch செய்து event முடிவில் single pass-இல் ஒன்றாக re-render செய்யும். குறிப்பிட்ட state update synchronously apply ஆக force செய்ய வேண்டிய அரிதான case-இல், அதை flushSync-இல் wrap செய்யலாம்; ஆனால் இது performance-ஐ பாதிக்கலாம்.

• setState this.state-ஐ உடனடியாக update செய்யாது. அதனால் setState call செய்த உடனே this.state read செய்வது potential pitfall. அதற்கு பதிலாக componentDidUpdate அல்லது setState callback argument use செய்யுங்கள்; இவை இரண்டும் update applied ஆன பிறகு fire ஆகும் என்று guaranteed. Previous state அடிப்படையில் state set செய்ய வேண்டுமெனில், மேலே விவரிக்கப்பட்டபடி nextState-க்கு function pass செய்யலாம்.

shouldComponentUpdate(nextProps, nextState, nextContext)

நீங்கள் shouldComponentUpdate define செய்தால், re-render skip செய்யலாமா என்பதை தீர்மானிக்க React அதை call செய்யும்.

அதை கைமுறையாக எழுத வேண்டும் என்று உறுதியாக இருந்தால், this.props-ஐ nextProps உடனும் this.state-ஐ nextState உடனும் compare செய்து update skip செய்யலாம் என்று React-க்கு சொல்ல false return செய்யலாம்.

class Rectangle extends Component {
  state = {
    isHovered: false
  };

  shouldComponentUpdate(nextProps, nextState) {
    if (
      nextProps.position.x === this.props.position.x &&
      nextProps.position.y === this.props.position.y &&
      nextProps.size.width === this.props.size.width &&
      nextProps.size.height === this.props.size.height &&
      nextState.isHovered === this.state.isHovered
    ) {
      // Nothing has changed, so a re-render is unnecessary
      return false;
    }
    return true;
  }

  // ...
}

புதிய props அல்லது state receive செய்யப்படும் போது render செய்வதற்கு முன் React shouldComponentUpdate call செய்கிறது. Default true. Initial render-க்கோ அல்லது forceUpdate use செய்யப்படும் போதோ இந்த method call செய்யப்படாது.

Parameters

• nextProps: Component render ஆகவிருக்கும் next props. என்ன மாறியது என்பதை தீர்மானிக்க nextProps-ஐ this.props உடன் compare செய்யுங்கள்.
• nextState: Component render ஆகவிருக்கும் next state. என்ன மாறியது என்பதை தீர்மானிக்க nextState-ஐ this.state உடன் compare செய்யுங்கள்.
• nextContext: Component render ஆகவிருக்கும் next context. என்ன மாறியது என்பதை தீர்மானிக்க nextContext-ஐ this.context உடன் compare செய்யுங்கள். static contextType specify செய்தால் மட்டுமே கிடைக்கும்.

Returns

Component re-render ஆக வேண்டும் என்றால் true return செய்யுங்கள். அதுவே default behavior.

Re-rendering skip செய்யலாம் என்று React-க்கு சொல்ல false return செய்யுங்கள்.

Caveats

• இந்த method performance optimization-க்காக மட்டுமே உள்ளது. இது இல்லாமல் உங்கள் component break ஆனால், முதலில் அதையே fix செய்யுங்கள்.

• shouldComponentUpdate-ஐ கைமுறையாக எழுதுவதற்கு பதிலாக PureComponent use செய்வதை consider செய்யுங்கள். PureComponent props மற்றும் state-ஐ shallowly compare செய்கிறது; தேவையான update ஒன்றை skip செய்யும் வாய்ப்பை குறைக்கிறது.

• shouldComponentUpdate-இல் deep equality checks செய்வதையோ JSON.stringify use செய்வதையோ பரிந்துரைக்கவில்லை. அது performance-ஐ unpredictable ஆக்கி, ஒவ்வொரு prop மற்றும் state-ன் data structure-ஐ depend செய்ய வைக்கிறது. Best case-இல், உங்கள் application-க்கு multi-second stalls அறிமுகப்படுத்தும் risk; worst case-இல் அதை crash செய்யும் risk.

• false return செய்வது child components-ன் அவற்றின் state மாறும்போது re-render ஆகுவதைத் தடுக்காது.

• false return செய்வது component re-render ஆகாது என்று guarantee செய்யாது. React return value-ஐ hint ஆக use செய்யும்; ஆனால் மற்ற காரணங்களுக்காக பொருத்தமானதாக இருந்தால் உங்கள் component-ஐ இன்னும் re-render செய்ய தேர்வு செய்யலாம்.

UNSAFE_componentWillMount()

நீங்கள் UNSAFE_componentWillMount define செய்தால், constructor-க்கு உடனடியாக பிறகு React அதை call செய்யும். இது historical reasons-க்காக மட்டுமே உள்ளது; புதிய code-இல் use செய்யக்கூடாது. அதற்கு பதிலாக alternatives-இல் ஒன்றை use செய்யுங்கள்:

• To initialize state, declare state as a class field or set this.state inside the constructor.
• Side effect run செய்ய அல்லது subscription set up செய்ய வேண்டுமெனில், அந்த logic-ஐ componentDidMount-க்கு move செய்யுங்கள்.

See examples of migrating away from unsafe lifecycles.

Parameters

UNSAFE_componentWillMount does not take any parameters.

Returns

UNSAFE_componentWillMount should not return anything.

Caveats

• UNSAFE_componentWillMount will not get called if the component implements static getDerivedStateFromProps or getSnapshotBeforeUpdate.

• பெயர் அப்படியாக இருந்தாலும், உங்கள் app Suspense போன்ற modern React features use செய்தால் component நிச்சயம் mount ஆகும் என்று UNSAFE_componentWillMount guarantee செய்யாது. Render attempt suspend ஆனால் (உதாரணமாக, சில child component-ன் code இன்னும் load ஆகாததால்), React in-progress tree-ஐ throw away செய்து அடுத்த attempt போது component-ஐ scratch-இலிருந்து construct செய்ய முயலும். அதனால்தான் இந்த method “unsafe”. Mounting-ஐ rely செய்யும் code (subscription சேர்ப்பது போன்றது) componentDidMount-க்கு செல்ல வேண்டும்.

• Server rendering போது run ஆகும் ஒரே lifecycle method UNSAFE_componentWillMount. நடைமுறை purposes அனைத்துக்கும் இது constructor-க்கு identical; எனவே இத்தகைய logic-க்கு அதற்கு பதிலாக constructor use செய்ய வேண்டும்.

UNSAFE_componentWillReceiveProps(nextProps, nextContext)

நீங்கள் UNSAFE_componentWillReceiveProps define செய்தால், component புதிய props receive செய்யும் போது React அதை call செய்யும். இது historical reasons-க்காக மட்டுமே உள்ளது; புதிய code-இல் use செய்யக்கூடாது. அதற்கு பதிலாக alternatives-இல் ஒன்றை use செய்யுங்கள்:

• Prop changes-க்கு response ஆக side effect run செய்ய வேண்டுமெனில் (உதாரணமாக data fetch செய்தல், animation run செய்தல், அல்லது subscription reinitialize செய்தல்), அந்த logic-ஐ componentDidUpdate-க்கு move செய்யுங்கள்.
• Prop மாறும்போது மட்டும் சில data மீண்டும் compute ஆகாமல் தவிர்க்க வேண்டுமெனில், அதற்கு பதிலாக memoization helper use செய்யுங்கள்.
• Prop மாறும்போது சில state-ஐ “reset” செய்ய வேண்டுமெனில், component-ஐ fully controlled ஆக்கவோ அல்லது key உடன் fully uncontrolled ஆக்கவோ consider செய்யுங்கள்.
• Prop மாறும்போது சில state-ஐ “adjust” செய்ய வேண்டுமெனில், rendering போது props மட்டும் கொண்டு தேவையான information அனைத்தையும் compute செய்ய முடியுமா என்று check செய்யுங்கள். முடியாவிட்டால், அதற்கு பதிலாக static getDerivedStateFromProps use செய்யுங்கள்.

See examples of migrating away from unsafe lifecycles.

Parameters

• nextProps: Component தனது parent component-இலிருந்து receive செய்யவிருக்கும் next props. என்ன மாறியது என்பதை தீர்மானிக்க nextProps-ஐ this.props உடன் compare செய்யுங்கள்.
• nextContext: Component closest provider-இலிருந்து receive செய்யவிருக்கும் next context. என்ன மாறியது என்பதை தீர்மானிக்க nextContext-ஐ this.context உடன் compare செய்யுங்கள். static contextType specify செய்தால் மட்டுமே கிடைக்கும்.

Returns

UNSAFE_componentWillReceiveProps should not return anything.

Caveats

• UNSAFE_componentWillReceiveProps will not get called if the component implements static getDerivedStateFromProps or getSnapshotBeforeUpdate.

• பெயர் அப்படியாக இருந்தாலும், உங்கள் app Suspense போன்ற modern React features use செய்தால் component அந்த props-ஐ நிச்சயம் receive செய்யும் என்று UNSAFE_componentWillReceiveProps guarantee செய்யாது. Render attempt suspend ஆனால் (உதாரணமாக, சில child component-ன் code இன்னும் load ஆகாததால்), React in-progress tree-ஐ throw away செய்து அடுத்த attempt போது component-ஐ scratch-இலிருந்து construct செய்ய முயலும். அடுத்த render attempt நேரத்திற்குள் props வேறுபட்டிருக்கலாம். அதனால்தான் இந்த method “unsafe”. Committed updates-க்கு மட்டும் run ஆக வேண்டிய code (subscription reset செய்வது போன்றது) componentDidUpdate-க்கு செல்ல வேண்டும்.

• UNSAFE_componentWillReceiveProps என்பது component last time-ஐ விட different props receive செய்தது என்று அர்த்தமல்ல. ஏதாவது மாறியதா என்று check செய்ய nextProps மற்றும் this.props-ஐ நீங்களே compare செய்ய வேண்டும்.

• Mounting போது initial props உடன் React UNSAFE_componentWillReceiveProps call செய்யாது. Component-ன் சில props update ஆகப் போகும் போது மட்டுமே இந்த method-ஐ call செய்யும். உதாரணமாக, setState call செய்வது பொதுவாக அதே component-க்குள் UNSAFE_componentWillReceiveProps trigger செய்யாது.

UNSAFE_componentWillUpdate(nextProps, nextState)

நீங்கள் UNSAFE_componentWillUpdate define செய்தால், புதிய props அல்லது state உடன் render செய்வதற்கு முன் React அதை call செய்யும். இது historical reasons-க்காக மட்டுமே உள்ளது; புதிய code-இல் use செய்யக்கூடாது. அதற்கு பதிலாக alternatives-இல் ஒன்றை use செய்யுங்கள்:

• Prop அல்லது state changes-க்கு response ஆக side effect run செய்ய வேண்டுமெனில் (உதாரணமாக data fetch செய்தல், animation run செய்தல், அல்லது subscription reinitialize செய்தல்), அந்த logic-ஐ componentDidUpdate-க்கு move செய்யுங்கள்.
• பின்னர் componentDidUpdate-இல் use செய்ய DOM-இலிருந்து சில information read செய்ய வேண்டுமெனில் (உதாரணமாக current scroll position save செய்ய), அதற்கு பதிலாக getSnapshotBeforeUpdate-க்குள் read செய்யுங்கள்.

See examples of migrating away from unsafe lifecycles.

Parameters

• nextProps: Component render ஆகவிருக்கும் next props. என்ன மாறியது என்பதை தீர்மானிக்க nextProps-ஐ this.props உடன் compare செய்யுங்கள்.
• nextState: Component render ஆகவிருக்கும் next state. என்ன மாறியது என்பதை தீர்மானிக்க nextState-ஐ this.state உடன் compare செய்யுங்கள்.

Returns

UNSAFE_componentWillUpdate should not return anything.

Caveats

• UNSAFE_componentWillUpdate will not get called if shouldComponentUpdate is defined and returns false.

• UNSAFE_componentWillUpdate will not get called if the component implements static getDerivedStateFromProps or getSnapshotBeforeUpdate.

• componentWillUpdate போது setState call செய்வது (அல்லது Redux action dispatch செய்வது போன்ற setState call ஆக வழிவகுக்கும் எந்த method-யும்) supported அல்ல.

• பெயர் அப்படியாக இருந்தாலும், உங்கள் app Suspense போன்ற modern React features use செய்தால் component நிச்சயம் update ஆகும் என்று UNSAFE_componentWillUpdate guarantee செய்யாது. Render attempt suspend ஆனால் (உதாரணமாக, சில child component-ன் code இன்னும் load ஆகாததால்), React in-progress tree-ஐ throw away செய்து அடுத்த attempt போது component-ஐ scratch-இலிருந்து construct செய்ய முயலும். அடுத்த render attempt நேரத்திற்குள் props மற்றும் state வேறுபட்டிருக்கலாம். அதனால்தான் இந்த method “unsafe”. Committed updates-க்கு மட்டும் run ஆக வேண்டிய code (subscription reset செய்வது போன்றது) componentDidUpdate-க்கு செல்ல வேண்டும்.

• UNSAFE_componentWillUpdate என்பது component last time-ஐ விட different props அல்லது state receive செய்தது என்று அர்த்தமல்ல. ஏதாவது மாறியதா என்று check செய்ய nextProps-ஐ this.props உடனும் nextState-ஐ this.state உடனும் நீங்களே compare செய்ய வேண்டும்.

• React doesn’t call UNSAFE_componentWillUpdate with initial props and state during mounting.

static contextType

உங்கள் class component-இலிருந்து this.context read செய்ய விரும்பினால், அது எந்த context-ஐ read செய்ய வேண்டும் என்பதை specify செய்ய வேண்டும். static contextType ஆக நீங்கள் specify செய்யும் context, முன்பு createContext மூலம் created ஆன value ஆக இருக்க வேண்டும்.

class Button extends Component {
  static contextType = ThemeContext;

  render() {
    const theme = this.context;
    const className = 'button-' + theme;
    return (
      <button className={className}>
        {this.props.children}
      </button>
    );
  }
}

static defaultProps

Class-க்கு default props set செய்ய static defaultProps define செய்யலாம். அவை undefined மற்றும் missing props-க்கு use செய்யப்படும்; ஆனால் null props-க்கு அல்ல.

உதாரணமாக, color prop default ஆக 'blue' ஆக இருக்க வேண்டும் என்பதை இவ்வாறு define செய்யலாம்:

class Button extends Component {
  static defaultProps = {
    color: 'blue'
  };

  render() {
    return <button className={this.props.color}>click செய்</button>;
  }
}

color prop provided செய்யப்படவில்லை அல்லது undefined ஆக இருந்தால், அது default ஆக 'blue' ஆக set செய்யப்படும்:

<>
  {/* this.props.color is "blue" */}
  <Button />

  {/* this.props.color is "blue" */}
  <Button color={undefined} />

  {/* this.props.color is null */}
  <Button color={null} />

  {/* this.props.color is "red" */}
  <Button color="red" />
</>

static getDerivedStateFromError(error)

நீங்கள் static getDerivedStateFromError define செய்தால், rendering போது child component (தொலைவில் உள்ள children உட்பட) error throw செய்யும்போது React அதை call செய்யும். UI-ஐ clear செய்வதற்கு பதிலாக error message display செய்ய இது அனுமதிக்கிறது.

பொதுவாக, error report-ஐ analytics service ஒன்றுக்கு send செய்ய அனுமதிக்கும் componentDidCatch உடன் இது சேர்த்து use செய்யப்படுகிறது. இந்த methods கொண்ட component Error Boundary என்று அழைக்கப்படுகிறது.

See an example.

Parameters

• error: Throw செய்யப்பட்ட error. நடைமுறையில், இது பொதுவாக Error instance ஆக இருக்கும்; ஆனால் இது guaranteed அல்ல, ஏனெனில் JavaScript strings அல்லது null உட்பட எந்த value-யையும் throw செய்ய அனுமதிக்கிறது.

Returns

static getDerivedStateFromError, error message display செய்ய component-க்கு சொல்லும் state-ஐ return செய்ய வேண்டும்.

Caveats

• static getDerivedStateFromError pure function ஆக இருக்க வேண்டும். Side effect செய்ய விரும்பினால் (உதாரணமாக analytics service call செய்ய), componentDidCatch-ஐயும் implement செய்ய வேண்டும்.

static getDerivedStateFromProps(props, state)

நீங்கள் static getDerivedStateFromProps define செய்தால், initial mount-இலும் subsequent updates-இலும் render call செய்வதற்கு உடனடியாக முன் React அதை call செய்யும். State update செய்ய object ஒன்றையோ, எதையும் update செய்ய வேண்டாம் எனில் null-ஐயோ return செய்ய வேண்டும்.

State காலப்போக்கில் props changes-ஐ depend செய்யும் அரிதான use cases-க்காக இந்த method உள்ளது. உதாரணமாக, userID prop மாறும்போது இந்த Form component email state-ஐ reset செய்கிறது:

class Form extends Component {
  state = {
    email: this.props.defaultEmail,
    prevUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevUserID) {
      return {
        prevUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

  // ...
}

இந்த pattern, prop-ன் previous value ஒன்றை (userID போன்றது) state-இல் (prevUserID போன்றது) வைத்திருக்க வேண்டும் என்பதை கவனிக்கவும்.

Parameters

• props: The next props that the component is about to render with.
• state: The next state that the component is about to render with.

Returns

static getDerivedStateFromProps return an object to update the state, or null to update nothing.

Caveats

• இந்த method cause எதுவாக இருந்தாலும் ஒவ்வொரு render-இலும் fired ஆகும். Parent re-render ஏற்படுத்தும் போது மட்டும் fire ஆகும், local setState காரணமாக அல்லாத UNSAFE_componentWillReceiveProps-இலிருந்து இது வேறுபடும்.

• இந்த method component instance-க்கு access இல்லை. விரும்பினால், component props மற்றும் state-ன் pure functions-ஐ class definition-க்கு வெளியே extract செய்வதன் மூலம் static getDerivedStateFromProps மற்றும் மற்ற class methods இடையே சில code reuse செய்யலாம்.

Usage

Defining a class component

React component ஒன்றை class ஆக define செய்ய, built-in Component class-ஐ extend செய்து render method define செய்யுங்கள்:

import { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>வணக்கம், {this.props.name}!</h1>;
  }
}

Screen-இல் என்ன display செய்ய வேண்டும் என்பதை தெரிந்துகொள்ள வேண்டிய ஒவ்வொரு முறையும் React உங்கள் render method-ஐ call செய்யும். பொதுவாக, அதிலிருந்து சில JSX return செய்வீர்கள். உங்கள் render method pure function ஆக இருக்க வேண்டும்: அது JSX-ஐ மட்டும் calculate செய்ய வேண்டும்.

Function components போலவே, class component தனது parent component-இலிருந்து props மூலம் information receive செய்யலாம். ஆனால் props read செய்யும் syntax வேறுபடும். உதாரணமாக, parent component <Greeting name="Taylor" /> render செய்தால், name prop-ஐ this.props-இலிருந்து this.props.name போல read செய்யலாம்:

useState போன்ற use-ஆல் தொடங்கும் functions ஆன Hooks class components-க்குள் supported அல்ல என்பதை கவனிக்கவும்.

Adding state to a class component

Class-க்கு state add செய்ய, state என்ற property-க்கு object assign செய்யுங்கள். State update செய்ய this.setState call செய்யுங்கள்.

Class component-க்கு lifecycle methods சேர்த்தல்

உங்கள் class-இல் define செய்யக்கூடிய சில special methods உள்ளன.

நீங்கள் componentDidMount method define செய்தால், உங்கள் component screen-க்கு add (mounted) ஆகும்போது React அதை call செய்யும். Props அல்லது state மாறியதால் உங்கள் component re-render ஆன பிறகு React componentDidUpdate-ஐ call செய்யும். உங்கள் component screen-இலிருந்து remove (unmounted) ஆன பிறகு React componentWillUnmount-ஐ call செய்யும்.

componentDidMount implement செய்தால், bugs தவிர்க்க பொதுவாக மூன்று lifecycles அனைத்தையும் implement செய்ய வேண்டும். உதாரணமாக, componentDidMount சில state அல்லது props read செய்தால், அவற்றின் changes handle செய்ய componentDidUpdate-ஐயும், componentDidMount செய்ததை clean up செய்ய componentWillUnmount-ஐயும் implement செய்ய வேண்டும்.

உதாரணமாக, இந்த ChatRoom component props மற்றும் state உடன் chat connection-ஐ synchronized ஆக வைத்திருக்கிறது:

Development-இல் Strict Mode on ஆக இருந்தால், React componentDidMount-ஐ call செய்து, உடனே componentWillUnmount-ஐ call செய்து, பின்னர் componentDidMount-ஐ மீண்டும் call செய்யும் என்பதை கவனிக்கவும். componentWillUnmount implement செய்ய மறந்தீர்களா அல்லது அதன் logic componentDidMount செய்வதை முழுமையாக “mirror” செய்யவில்லையா என்பதை கவனிக்க இது உதவும்.

Error Boundary மூலம் rendering errors catch செய்தல்

Default ஆக, உங்கள் application rendering போது error throw செய்தால், React அதன் UI-ஐ screen-இலிருந்து remove செய்யும். இதைத் தடுக்க, உங்கள் UI-ன் ஒரு பகுதியை Error Boundary ஒன்றில் wrap செய்யலாம். Error Boundary என்பது crashed ஆன பகுதியின் பதிலாக சில fallback UI-ஐ, உதாரணமாக error message-ஐ, display செய்ய அனுமதிக்கும் special component.

Error Boundary component implement செய்ய, error-க்கு response ஆக state update செய்து user-க்கு error message display செய்ய அனுமதிக்கும் static getDerivedStateFromError-ஐ provide செய்ய வேண்டும். கூடுதல் logic சேர்க்க, உதாரணமாக error-ஐ analytics service-க்கு log செய்ய, optional ஆக componentDidCatch-ஐயும் implement செய்யலாம்.

captureOwnerStack மூலம் development போது Owner Stack-ஐ include செய்யலாம்.

import * as React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToMyService(
      error,
      // Example "componentStack":
      //   in ComponentThatThrows (created by App)
      //   in ErrorBoundary (created by App)
      //   in div (created by App)
      //   in App
      info.componentStack,
      // Warning: `captureOwnerStack` is not available in production.
      React.captureOwnerStack(),
    );
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

பிறகு உங்கள் component tree-ன் ஒரு பகுதியை அதனால் wrap செய்யலாம்:

<ErrorBoundary fallback={<p>ஏதோ தவறு நடந்தது</p>}>
  <Profile />
</ErrorBoundary>

Profile அல்லது அதன் child component error throw செய்தால், ErrorBoundary அந்த error-ஐ “catch” செய்து, நீங்கள் provided செய்த error message உடன் fallback UI display செய்து, production error report-ஐ உங்கள் error reporting service-க்கு send செய்யும்.

ஒவ்வொரு component-ஐயும் தனி Error Boundary-இல் wrap செய்ய வேண்டியதில்லை. Error Boundaries-ன் granularity பற்றி சிந்திக்கும் போது, error message display செய்வது எங்கே பொருத்தமுள்ளதாக இருக்கும் என்பதை consider செய்யுங்கள். உதாரணமாக, messaging app-இல் conversations list சுற்றி Error Boundary வைப்பது பொருத்தம். ஒவ்வொரு individual message-ஐச் சுற்றியும் ஒன்று வைப்பதும் பொருத்தம். ஆனால் ஒவ்வொரு avatar-ஐச் சுற்றியும் boundary வைப்பது பொருத்தமல்ல.

Alternatives

Simple component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்

பொதுவாக, அதற்கு பதிலாக components-ஐ functions ஆக define செய்வீர்கள்.

உதாரணமாக, இந்த Greeting class component-ஐ function-ஆக convert செய்கிறீர்கள் என வைத்துக்கொள்ளுங்கள்:

Greeting என்ற function define செய்யுங்கள். உங்கள் render function-ன் body-ஐ இங்கே move செய்வீர்கள்.

function Greeting() {
  // ... move the code from the render method here ...
}

this.props.name பதிலாக, destructuring syntax பயன்படுத்தி name prop-ஐ define செய்து நேரடியாக read செய்யுங்கள்:

function Greeting({ name }) {
  return <h1>வணக்கம், {name}!</h1>;
}

முழு example இதோ:

State கொண்ட component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்

இந்த Counter class component-ஐ function-ஆக convert செய்கிறீர்கள் என வைத்துக்கொள்ளுங்கள்:

தேவையான state variables உடன் function declare செய்வதிலிருந்து தொடங்குங்கள்:

import { useState } from 'react';

function Counter() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);
  // ...

அடுத்து, event handlers-ஐ convert செய்யுங்கள்:

function Counter() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  function handleNameChange(e) {
    setName(e.target.value);
  }

  function handleAgeChange() {
    setAge(age + 1);
  }
  // ...

இறுதியாக, this-ஆல் தொடங்கும் references அனைத்தையும் உங்கள் component-இல் defined செய்த variables மற்றும் functions-ஆக replace செய்யுங்கள். உதாரணமாக, this.state.age-ஐ age-ஆகவும், this.handleNameChange-ஐ handleNameChange-ஆகவும் replace செய்யுங்கள்.

முழுமையாக converted component இதோ:

Lifecycle methods கொண்ட component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்

Lifecycle methods கொண்ட இந்த ChatRoom class component-ஐ function-ஆக convert செய்கிறீர்கள் என வைத்துக்கொள்ளுங்கள்:

முதலில், உங்கள் componentWillUnmount, componentDidMount செய்வதற்கு opposite ஆக செய்கிறதா என்பதை verify செய்யுங்கள். மேலுள்ள example-இல் அது உண்மை: componentDidMount set up செய்யும் connection-ஐ அது disconnect செய்கிறது. அத்தகைய logic missing என்றால், அதை முதலில் சேர்க்கவும்.

அடுத்து, componentDidMount-இல் use செய்யும் props மற்றும் state-இல் ஏதாவது changes-ஐ உங்கள் componentDidUpdate method handle செய்கிறதா என்பதை verify செய்யுங்கள். மேலுள்ள example-இல், componentDidMount setupConnection call செய்கிறது; அது this.state.serverUrl மற்றும் this.props.roomId read செய்கிறது. அதனால்தான் componentDidUpdate, this.state.serverUrl மற்றும் this.props.roomId மாறியுள்ளதா என்று check செய்து, மாறியிருந்தால் connection-ஐ reset செய்கிறது. உங்கள் componentDidUpdate logic missing அல்லது relevant props மற்றும் state அனைத்தின் changes-ஐ handle செய்யவில்லை என்றால், அதை முதலில் fix செய்யுங்கள்.

மேலுள்ள example-இல், lifecycle methods-க்குள் உள்ள logic component-ஐ React-க்கு வெளியே உள்ள system ஒன்றுக்கு (chat server) connect செய்கிறது. Component-ஐ external system-க்கு connect செய்ய, இந்த logic-ஐ single Effect ஆக describe செய்யுங்கள்:

import { useState, useEffect } from 'react';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);

  // ...
}

இந்த useEffect call மேலுள்ள lifecycle methods-இல் உள்ள logic-க்கு equivalent. உங்கள் lifecycle methods பல unrelated விஷயங்களைச் செய்தால், அவற்றை பல independent Effects-ஆக split செய்யுங்கள். பயன்படுத்திப் பார்க்கக்கூடிய முழு example இதோ:

Context கொண்ட component-ஐ class-இலிருந்து function-க்கு migrate செய்தல்

இந்த example-இல், Panel மற்றும் Button class components this.context-இலிருந்து context read செய்கின்றன:

அவற்றை function components-ஆக convert செய்யும்போது, this.context-ஐ useContext calls-ஆக replace செய்யுங்கள்: