React.Component

Αυτή η σελίδα περιλαμβάνει ένα αναλυτικό API reference για τον ορισμό του React component class. Υποθέτει πως έχετε γνώση από τις βασικές έννοιες του React, όπως για παράδειγμα Components and Props, αλλά και τα State and Lifecycle. Εάν όχι, διαβάστε τα προτού ξεκινήσετε.

Overview

Το React σας επιτρέπει να ορίσετε components ως classes ή functions. Τα components που έχουν οριστεί σαν classes για την ώρα περιλαμβάνουν περισσότερες λειτουργίες τις οποίες θα βρείτε αναλυτικά σε αυτή τη σελίδα. Για να ορίσετε μια κλάση ως React component, πρέπει να επεκτείνετε (extend) το React.Component:

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

Η μόνη μέθοδος που οπωσδήποτε πρέπει να ορίσετε σε μια React.Component υποκλάση ονομάζετε render(). Όλες οι υπολοιπες μέθοδοι που περιγράφονται σε αυτή τη σελίδα είναι προαιρετικές.

Δεν προτείνουμε την δημιουργία των δικών σας base component classes. Στα React components, η επαναχρησιμοποίηση κώδικα συνήθως επιτυγχάνεται με composition και όχι με inheritance.

Σημείωση:

Το React δε σας υποχρεώνει να χρησιμοποιήσετε την ES6 class σύνταξη. Αν επιθυμείτε να την αποφύγετε, μπορείτε να χρησιμοποιήσετε το create-react-class module ή κάποιο παρόμοιο custom abstraction instead. Ρίξτε μια ματιά στο Using React without ES6 για να μάθετε περισσότερα.

The Component Lifecycle

Κάθε component έχει αρκετά “lifecycle methods” που μπορείτε να κάνετε override για να τρέξετε κώδικα σε συγκεκριμένα χρονικά σημεία. Μπορείτε να χρησιμοποιήσετε αυτό το lifecycle διάγραμμα σαν ένα cheat sheet. Στη παρακάτω λίστα, τα lifecycle methods με την πιο κοινή χρήση είναι σημειωμένα με bold. Τα υπόλοιπα υπάρχουν για σχετικά σπάνιες περιπτώσεις.

Mounting

Αυτές οι μέθοδοι καλούνται με την παρακάτω σειρά όταν ένα στιγμιότυπο ενός component δημιουργείται και εισάγεται στο DOM: στιγμιότυπο ενός component δημιουργείται και εισάγετε στο DOM:

Σημείωση:

Αυτές οι μέθοδοι θεωρούνται legacy και συνηστούμε να τις αποφύγετε όταν γράφετε καινούργιο κώδικα:

Updating

Ένα update μπορεί να ξεκινήσει από κάποιες αλλαγές στα props ή το state. Αυτές οι μέθοδοι καλούνται με την ακόλουθη σειρά όταν ένα component γίνεται re-rendered:

Σημείωση:

Αυτές οι μέθοδοι θεωρούνται legacy και συνηστούμε να τις αποφύγετε όταν γράφετε καινούργιο κώδικα:

Unmounting

Αυτές οι μέθοδοι καλούνται όταν ένα component αφαιρείται απο το DOM:

Διαχείριση σφαλμάτων

Αυτές οι μέθοδοι καλούνται όταν ένα σφάλμα συμβαίνει κατά το rendering, σε μια lifecycle μέθοδο, ή στο constructor κάποιου child component.

Άλλα APIs

Κάθε component ακόμα παρέχει κάποια επιπλέον APIs:

Class Properties

Instance Properties


Reference

Συχνά χρησιμοποιούμενες Lifecycle Μέθοδοι

Οι μέθοδοι σε αυτή την ενότητα καλύπτουν τη πλειοψηφία των use cases που θα συναντήσετε όταν δημιουργείτε React components. Για μια οπτική παραπομπή, δείτε αυτό το lifecycle διάγραμμα.

render()

render()

Η render() μέθοδος είναι η μόνη υποχρεωτική μέθοδος σε ένα class component.

Οταν καλείται, πρέπει να εξετάζει τα this.props και this.state και να επιστρέφει έναν από τους παρακάτω τύπους:

  • React elements. Συνήθως δημιουργούνται με JSX. Για παράδειγμα, το <div /> και το <MyComponent /> είναι React elements που δίνουν εντολή στο React να κάνει render ένα DOM node, ή κάποιο άλλο user-defined component, αντίστοιχα.
  • Arrays and fragments. Επιτρέπουν να επιστρέψετε διάφορα elements από το render. Δείτε το documentation για τα fragments για περισσότερες λεπτομέρειες.
  • Portals. Επιτρέπουν να κάνετε render παιδιά σε ένα διαφορετικό DOM subtree. Δείτε το documentation για τα portals για περισσότερες λεπτομέρειες.
  • String and numbers. Αυτά γίνονται rendered σαν text nodes στο DOM.
  • Booleans or null. Δεν κάνουν τίποτα render . (Κυρίως υπάρχουν για να υποστηρίζουν το return test && <Child /> πρότυπο, όπου το test είναι boolean.)

Η render() συνάρτηση πρέπει να είναι pure, δηλαδή να μην τροποποιεί το component state, να επιστρέφει το ίδιο αποτέλεσμα κάθε φορά που καλείται, και να μην αλληλεπιδρά απευθείας με τον browser.

Εάν χρειαστεί να αλληλεπιδράσετε με τον browser, κάντε τη δουλειά σας στην componentDidMount() μέθοδο ή καποια αλλη lifecycle μέθοδο αντιστοίχως. Κρατώντας την render() pure κάνει τα components πιό κατανοητά.

Σημείωση

Το render() δε θα κληθεί εάν το shouldComponentUpdate() επιστρέψει false.


constructor()

constructor(props)

Εάν δεν αρχικοποιείτε το state ή δεν κάνετε bind τις μεθόδους, δε χρειάζεται να υλοποιήσετε το constructor για το React component

Το constructor για ένα React component καλείται προτού γίνει mounted. Όταν υλοποιείτε το constructor για ένα React.Component subclass, θα πρέπει να καλείτε το super(props) πριν από οποιοδήποτε άλλο statement. Διαφορετικά, το this.props θα είναι undefined στο constructor, το οποίο μπορεί να οδηγήσει σε bugs.

Συνήθως, στο React οι constructors χρειάζονται για δυο περιπτώσεις:

  • Αρχικοποιήση local state αναθέτοντας ένα object στο this.state.
  • Για το binding event handler μεθόδων σε ένα instance.

Δεν πρέπει να καλείτε το setState() στο constructor(). Απεναντίας, εάν το component χρειάζεται να κάνει χρήση local state, αναθέστε το αρχικο state στο this.state απευθείας στο constructor:

constructor(props) {
  super(props);
  // Μην καλείτε το this.setState() εδώ!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Το μόνο σημείο που μπορείτε να αναθέσετε απευθείας το this.state είναι στο constructor. Σε όλες τις άλλες μεθόδους, χρειάζεται να χρησιμοποιήσετε το this.setState().

Αποφύγετε την εισαγωγή διαφόρων side-effects ή subscriptions μέσα στο constructor. Για αυτές τις περιπτώσεις, χρησιμοποιήστε componentDidMount().

Σημείωση

Αποφύγετε να αντιγράφετε props στο state! Αυτό είναι ένα σύνηθες λάθος:

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

Το πρόβλημα του είναι πως και είναι αχρείαστο (μπορείτε να καλέσετε this.props.color απευθείας), αλλά και πως δημιουργεί bugs (αλλαγές στο color prop δε θα εμφανιστούν στο state).

Χρησιμοποιήστε αυτό το pattern μόνο εάν σκοπίμως θέλετε να αγνοήσετε τα prop updates. Σε αυτή την περίπτωση, έχει περισσότερο νόημα να ονομάσετε το prop initialColor ή defaultColor. Μπορείτε μετά να αναγκάσετε το component να κάνει “reset” το εσωτερικό του state με το να αλλάξετε το key όταν αυτό είναι απαραίτητο.

Διαβάστε το blog post για την αποφυγή του derived state για να μάθετε τι πρέπει να κάνετε αν νομίζετε πως χρειάζεστε state που να βασίζεται σε καποια props.


componentDidMount()

componentDidMount()

Το componentDidMount() καλείται απευθείας αφού ένα component γίνει mounted (δηλαδή τοποθετηθεί στο tree). Οποιαδήπωτε αρχικοποίηση που χρειάζεται DOM nodes θα πρέπει να γίνεται εδώ. Εάν χρεάζεται να φορτώσετε data απο ενα απομακρυσμένο endpoint, αυτό είναι ενα καλό σημειο για να κάνετε instantiate το network request.

Αυτή η μέθοδος είναι ενα καλό σημείο για να τοποθετήσετε τυχον subscriptions. Εάν το κάνετε αυτό, μην ξεχάσετε να κάνετε unsubscribe στο componentWillUnmount().

Μπορείτε να καλέσετε το setState() άμέσα στο componentDidMount(). Αυτό θα ξεκινήσει ένα επιπλέον rendering, αλλά θα συμβεί προτού ο browser ανανεώσει την οθόνη. Αυτό εγγυάται πως ακόμα και αν το render() κληθεί δυο φορές σε αυτη την περίπτωση, ο χρήστης δε θα δει το ενδιάμεσο state. Χρησιμοποιήστε αυτό το pattern με προσοχή γιατί συχνά δημιουργεί performance issues. Στις περισσότερες περιπτώσεις, πρέπει να μπορείτε να αναθέτετε το αρχικό state στο constructor(). Μπορεί ωστόσο να είναι απαραίτητο σε περιπτώσεις όπως τα modals και τα tooltips, όπου χρειάζεται να μετρήσετε ένα DOM node πριν κάνετε render κάτι το οποίο βασίζεται στο μέγεθος ή τη θέση του. Χρησιμοποιήστε αυτό το pattern με προσοχή γιατί συχνά δημιουργεί performance issues. Στις περισσότερες περιπτωσεις, πρέπει να μπορείτε να αναθέτετε το αρχικό state στον constructor(). It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.


componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

Το componentDidUpdate() καλείται αμέσως μόλις συμβεί το updating. Αυτή η μέθοδος δεν καλείται για το αρχικό render.

Χρησιμοποιήστε την για να έχετε μια ευκαιρία ώστε να μπορέσετε να λειτουργήσετε στο DOM όταν το component έχει γίνει update. Επίσης αυτό είναι ένα καλό σημείο για να κάνετε network requests εφόσον συγκρίνετε τα props με τα προηγούμενα props(π.χ. ενα network request ίσως να μην είναι απαραίτητο αν τα props δεν έχουν αλλάξει).

componentDidUpdate(prevProps) {
  // Μια τυπική χρήση (μην ξεχάσετε να συγκρίνετε τα props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Μπορείτε να καλέσετε το setState() αμεσως στο componentDidUpdate() αλλά έχετε υπόψη σας πως πρέπει να είναι wrapped μέσα σε μια συνθήκη όπως στο παράδειγμα παραπάνω, ή διαφορετικά θα προκαλέσετε ενα infinite loop. Επίσης θα προκαλέσει ενα επιπλέον re-rendering το οποίο, παρόλο που δε θα είναι εμφανές στο χρήστη, μπορεί να επηρεάσει την επίδοση του component. Αν προσπαθείτε να “αντιγράψετε” κάποιο state σε ενα prop που έρχεται απο πάνω, εξετάστε να χρησιμοποιήσετε αυτό το prop απευθείας. Διαβάστε περισσότερα για το γιατί η αντιγραφή props στο state προκαλεί bugs.

Εάν το component υλοποιεί την getSnapshotBeforeUpdate() lifecycle μέθοδο (κάτι που είναι σπάνιο), η τιμή που επιστρέφει θα περάσει σα μια τρίτη “snapshot” παράμετρος στο componentDidUpdate(). Διαφορετικά αυτή η παράμετρος θα είναι undefined.

Σημείωση

componentDidUpdate() δε θα κληθεί εαν shouldComponentUpdate() επιστρέψει false.


componentWillUnmount()

componentWillUnmount()

Το componentWillUnmount() καλείται απευθείας προτού ένα component γίνει unmounted και καταστραφεί. Εκτελέστε το απαραίτητο καθάρισμα σε αυτή τη μέθοδο, όπως το invalidating των timers, η ακύρωση network requests, ή το καθάρισμα τυχον subscriptions που δημιουργήθηκαν στο componentDidMount().

Δεν πρέπει να καλείτε το setState() στο componentWillUnmount() γιατί το component δε θα γίνει ποτέ re-rendered. Από τη στιγμή που ένα component instance γίνει unmounted, δε θα ξανα γίνει mounted ποτέ.


Σπάνια χρησιμοποιούμενες Lifecycle Methods

Οι μέθοδοι σε αυτή την ενότητα αντιστοιχούν σε σπάνιες περιπτώσεις. Είναι χρήσιμες μια στο τόσο, αλλά τα περισσότερα απο τα components σας δε θα τις χρειαστούν. Μπορείτε να δείτε τις περισσότερες απο αυτές στο lifecycle diagram εάν κάνετε κλικ στο “Show less common lifecycles” checkbox στην κορυφή.

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

Χρησιμοποιήστε την shouldComponentUpdate() μέθοδο για να ενημερώσετε το React εάν κάποιο output ενός component δεν επηρεάζεται απο τις παρούσες αλλαγές στο state ή στα props. Η προκαθορισμένη συμπεριφορά είναι να κάνει re-render σε κάθε αλλαγή του state, και στις περισσότερες περιπτώσεις θα πρέπει να βασίζεστε στη default συμπεριφορά.

Το shouldComponentUpdate() καλείται πριν το rendering όταν λαμβάνετε νέα props ή state. Η default τιμή του είναι true. Αυτή η μέθοδος δεν καλείται για το αρχικό render ή όταν χρησιμοποιείται το forceUpdate().

Αυτή η μέθοδος υπάρχει μόνο για το performance optimization. Μη βασίζεστε σε αυτήν για να “αποτρέψετε” ένα rendering, καθώς μπορεί να οδηγήσει σε bugs. Σκεφτείτε να χρησιμοποιήσετε το built-in PureComponent αντί για να γράψετε το shouldComponentUpdate() μόνοι σας. Το PureComponent εκτελεί μια shallow σύγκριση των props και του state, και μειώνει την πιθανότητα να παραλείψετε ένα απαραίτητο update.

Εαν είστε σίγουροι πως θέλετε να το γράψετε μόνοι σας, μπορείτε να συγκρίνετε το this.props με το nextProps και το this.state με το nextState και να επιστρέψετε false ώστε να πείτε στο React πως μπορεί να παραλείψει το update. Σημειώστε πως επιστρέφοντας false δεν αποτρέπει τα child components από το να κάνουν re-rendering όταν το δικό τους state αλλάξει.

Δεν συνιστούμε να κάνετε deep equality ελέγχους ή να χρησιμοποιήσετε την JSON.stringify() στο shouldComponentUpdate(). είναι ιδιαίτερα αναποτελεσματικό και θα βλάψει το performance.

Επί του παρόντος, εάν το shouldComponentUpdate() επιστρέψει false, τότε το UNSAFE_componentWillUpdate(), το render(), και το componentDidUpdate() δε θα κληθούν. Στο μέλλον μπορεί το React να χειρίζεται το shouldComponentUpdate() σαν ένα hint παρά σαν μια αυστηρή οδηγία, και η επιστροφή του false μπορεί να οδηγεί σε re-rendering του component.


static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

Το getDerivedStateFromProps καλείται ακριβώς πριν να κληθεί η render μέθοδος, τόσο στο initial mount αλλά και στα επόμενα updates. Πρέπει να επιστρέψει ενα αντικείμενο για να κάνει update το state, ή null για να μην κάνει update τίποτα.

Αυτή η μέθοδος υπάρχει για σπάνιες περιπτωσεις όπου το state βασίζεται σε αλλαγές στα props κατά το πέρασμα του χρόνου. Για παράδειγμα, μπορεί να αποδειχθεί βολικό για την υλοποίηση ενος <Transition> component το οποίο συγκρίνει τα προηγουμενα με τα επόμενα children για να αποφασίσει ποια θα κάνει animate in και out.

Το deriving του state οδηγεί σε verbose κώδικα και κάνει τα components δυσνόητα. Σιγουρευτείτε πως είστε εξοικοιωμένοι με πιο απλές λύσεις:

  • Εαν χρειαστει να εκτελέσετε καποιο side effect (για παράδειγμα, data fetching ή κάποιο animation) ως απάντηση σε αλλαγές των props, χρησιμοποιήστε το componentDidUpdate.

  • Εαν χρειαστει να επανυπολογίσετε κάποια data όταν κάποιο prop αλλάξει τιμή, χρησιμοποιήστε το memoization helper.

  • Εάν χρειαστεί να κάνετε “reset” κάποιο state όταν ένα prop αλλάζει τιμή, σκεφτείτε να κάνετε ένα component fully controlled ή fully uncontrolled with a key.

Αυτή η μέθοδος δεν έχει πρόσβαση στο instance του component. Εάν προτιμάτε μπορείτε να ξανα χρησιμοποιήσετε κώδικα μεταξύ του getDerivedStateFromProps() και των άλλων class methods εξάγοντας pure functions από τα props και το state του component έξω από το class definition.

Σημειώστε πως αυτή η μέθοδος καλείται σε κάθε render, ανεξαρτήτως αιτίας. Αυτό έρχεται σε αντίθεση με το UNSAFE_componentWillReceiveProps, το οποίο εκτελείται μόνο όταν ένας γονέας προκαλεί ένα re-render και όχι σαν αποτέλεσμα ενός τοπικού setState.


getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

Το getSnapshotBeforeUpdate() καλείται ακριβώς πριν το πιο πρόσφατο rendered output γίνει committed π.χ. στο DOM. Επιτρέπει το component σας να μπορεί να κάνει capture κάποιες πληροφοριες από το DOM (π.χ. τη θεση του scrolling) πριν από κάποια ενδεχόμενη αλλαγή. Όποία τιμή επιστραφεί από αυτή τη μέθοδο θα περαστεί σαν παράμετρος στο componentDidUpdate().

Η συγκεκριμενη περίπτωση δεν είναι συνηθισμένη, αλλά μπορεί να εμφανιστεί σε UIs όπως ενα chat thread όπου χρειάζεται να χειρίζεστε το scroll position με συγκεκριμένο τρόπο.

Μια snapshot τιμή (ή null) πρέπει να επιστραφεί.

Για παράδειγμα:

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

Στα παραπάνω παραδείγματα, είναι σημαντικό να διαβάσετε το property scrollHeight στο getSnapshotBeforeUpdate γιατί μπορεί να υπάρξουν καθυστερήσεις μεταξύ της “render” φάσης του lifecycle (όπως της render) και της “commit” φάσης του lifecycle (όπως της getSnapshotBeforeUpdate και της componentDidUpdate).


Error boundaries

Τα Error boundaries είναι React components τα οποία πιάνουν JavaScript errors οπουδήποτε στο child component δέντρο, κάνουν log αυτά τα errors, και εμφανίζουν ένα fallback UI αντί του component tree που έγινε crash. Τα error boundaries πιάνουν errors κατά τη διάρκεια του rendering, σε lifecycle methods, και σε constructors ολόκληρου του tree μέσα σε αυτά.

Ένα class component γίνεται ένα error boundary εάν ορίζει είτε το ένα (είτε και τα δυο) από τα lifecycle methods static getDerivedStateFromError() ή componentDidCatch(). Η ενημέρωση του state από αυτά τα lifecycles σας επιτρέπει να “πιάσετε” ενα unhandled JavaScript error στο δέντρο από κάτω του και να εμφανίσετε ένα fallback UI.

Χρησιμοποιήστε τα error boundaries για το recovering από αναπάντεχα exceptions; μη προσπαθείσετε να τα χρησιμοποιήσετε για τον έλεγχο του flow.

Για περισσότερες πληροφορίες, δείτε το Error Handling in React 16.

Σημείωση

Τα error boundaries πιάνουν errors μόνο στα components που βρίσκονται κάτω από αυτά στο δεντρο. Ενα error boundary δεν μπορεί να πιάσει ένα errοr μέσα του.

static getDerivedStateFromError()

static getDerivedStateFromError(error)

Αυτό το lifecycle καλείται όταν ένα component που είναι απόγονος έχει ρίξει ένα error. Λαμβάνει το error που έχει ρίξει σαν παράμετρο και πρέπει να επιστρέψει μια τιμή για να κάνει update το state.

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

  render() {
    if (this.state.hasError) {
      // Mπορείτε να κάνετε render οποιοδήποτε fallback UI
      return <h1>Κατι πηγε λαθος.</h1>;
    }

    return this.props.children;
  }
}

Σημείωση

Το getDerivedStateFromError() καλείται κατά τη διάρκεια της “render” φάσης, συνεπώς δεν επιτρέπονται side-effects. Για αυτές τις περιπτωσεις, χρησιμοποιήστε τοcomponentDidCatch().


componentDidCatch()

componentDidCatch(error, info)

Αυτό το lifecycle καλείται αφότου ένα component που είναι απόγονος έχει πετάξει ένα error. Λαμβάνει δυο παραμέτρους:

  1. error - To error που πετάχτηκε.
  2. info - Ένα αντικείμενο με ένα componentStack key που περιέχει πληροφορίες σχετικά με το ποιο component πέταξε το error.

Το componentDidCatch() καλείται κατά τη διάρκεια της “commit” φάσης, οπότε επιτρέπονται τα side-effects. Θα πρέπει να χρησιμοποιείται για πράγματα όπως το logging των errors:

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) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Σημείωση

Στην περίπτωση ενός error, μπορείτε να κάνετε render ένα fallback UI με το componentDidCatch() καλώντας το setState, αλλά αυτό θα καταργηθεί σε καποια μελλοντική έκδοση. Χρησιμοποιήστε static getDerivedStateFromError() για να χειριστείτε fallback rendering.


Legacy Lifecycle Methods

Οι lifecycle μέθοδοι παρακάτω έχουν χαρακτηριστεί ως “legacy”. Ακόμα δουλεύουν, αλλά δε συνιστούμε να τις χρησιμοποιήσετε όταν γράφετε νέο κώδικα. Μπορείτε να μάθετε περισσότερα για το πως θα απομακρύνετε legacy lifecycle μεθόδους σε αυτό το blog post.

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

Σημείωση

Αυτό το lifecycle προηγουμένως ονομαζόταν componentWillMount. Αυτό το όνομα θα συνεχίσει να λειτουργεί μέχρι την έκδοση 17. Χρησιμοποιήστε το rename-unsafe-lifecycles codemod ώστε να ανανεώσετε αυτόματα τα components σας.

Το UNSAFE_componentWillMount() καλείται ακριβώς πριν συμβεί το mounting. Καλείται πριν το render(), συνεπώς αν καλέσετε το setState() synchronously σε αυτή τη μέθοδο δε θα κάνει trigger ένα επιπλέον rendering. Γενικώς, προτείνουμε να χρησιμοποιείτε το constructor() αντί να αρχικοποιείτε το state.

Αποφύγετε να εισάγετε τυχόν side-effects ή subscriptions σε αυτό το method. Για αυτές τις περιπτώσεις, χρησιμοποιήστε componentDidMount().

Αυτή είναι η μόνη lifecycle μέθοδος που καλείται όταν γίνεται server rendering.


UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

Σημείωση

Αυτό το lifecycle προηγουμένως ονομαζόταν componentWillReceiveProps. Αυτό το όνομα θα συνεχίσει να δουλεύει μέχρι την εκδοση 17. Χρησιμοποιήστε το rename-unsafe-lifecycles codemod ώστε να ανανεώσετε αυτόματα τα components σας.

Σημείωση:

Η χρήση αυτής της lifecycle μεθόδου συχνά οδηγεί σε bugs και inconsistencies

  • Εάν χρειάζεται να εκτελέσετε ενα side effect (για παράδειγμα, να φέρετε κάποια data ή καποιο animation) ως απάντηση σε μια αλλαγή στα props, χρησιμοποιήστε το componentDidUpdate lifecycle.
  • Εάν κάνατε χρήση του componentWillReceiveProps για επανυπολογισμό κάποιων data μόνο όταν κάποιο prop αλλάξει, χρησιμοποιήστε το memoization helper instead.
  • Εάν κάνατε χρήση του componentWillReceiveProps ώστε να κάνετε “επαναφορά” κάποιου state όταν ένα prop αλλάξει, εξετάστε το ενδεχόμενο είτε να φτιάξετε ένα component fully controlled είτε fully uncontrolled με κάποιο key.

Για τις υπολοιπες περιπτώσεις, ακολουθήστε τις συστάσεις σε αυτό το blog post σχετικά με το derived state.

Το UNSAFE_componentWillReceiveProps() καλείται προτού ένα mounted component λάβει νέα props. Εάν πρέπει να κάνετε update το state ως απάντηση σε αλλαγές των props (για παράδειγμα, να το κάνετε επαναφορά), μπορείτε να συγκρίνετε το this.props και το nextProps και να εκτελέσετε state transitions χρησιμοποιώντας το this.setState() σε αυτή τη μέθοδο.

Σημειώστε πως όταν ένα parent component προκαλεί το component σας να γίνει re-render, αυτή η μέθοδος θα κληθεί ακόμα και αν τα props δεν έχουν αλλάξει. Προσέξτε να συγκρίνετε τις τρέχον τιμές με τις επόμενες εάν θέλετε να κάνετε handle τις αλλαγές.

Το React δεν καλεί το UNSAFE_componentWillReceiveProps() με αρχικοποιημένα props κατά τη διάρκεια του mounting. Καλεί μόνο αυτή τη μέθοδο αν κάποια από τα props του component πρέπει να γινουν update. Καλώντας το this.setState() συνήθως δεν κάνει trigger το UNSAFE_componentWillReceiveProps().


UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

Σημειωησ

Αυτό το lifecycle προηγουμένως ονομαζόταν componentWillUpdate. Αυτό το όνομα θα συνεχίσει να λειτουργεί μεχρι την έκδοση 17. Χρησιμοποιήστε το rename-unsafe-lifecycles codemod ώστε να ανανεώσετε αυτόματα τα components σας.

Το UNSAFE_componentWillUpdate() καλείται ακριβώς πριν το rendering όταν νέα props ή νέο state λαμβάνετε. Χρησιμοποιήστε το σαν ευκαιρία για να προετοιμαστείτε πριν συμβεί ένα update. Αυτή η μέθοδος δεν καλείται στο αρχικό render.

Σημειώστε πως δε μπορείτε να καλεσετε την this.setState() εδώ, ουτε μπορείτε να κάνετε ο,τιδήποτε άλλο (π.χ. dispatch ενός Redux action) το οποιο μπορεί να προκαλέσει ένα update σε ένα React component πριν το UNSAFE_componentWillUpdate() επιστρέψει.

Συνήθως, αυτή η μέθοδος μπορεί να αντικατασταθεί από το componentDidUpdate(). Εάν διαβάζετε αυτή τη μέθοδο από το DOM (π.χ. για να σώσετε ένα scoll position), μπορείτε να μετακινήσετε αυτή τη λογική στο getSnapshotBeforeUpdate().

Σημείωση

Το UNSAFE_componentWillUpdate() δε θα κληθεί εάν η shouldComponentUpdate() επιστρέψει false.


Επιπλέον APIs

Εν αντιθέσει με τα lifecycle methods παραπάνω (τα οποία το React καλεί για εσάς), οι παρακάτω μέθοδοι είναι οι μέθοδοι τις οποίες εσείς μπορείτε να καλέσετε από τα components σας.

Υπάρχουν μόνο δυο : setState() και forceUpdate().

setState()

setState(updater[, callback])

setState() κάνει enqueue τις αλλαγές στο state του component και ενημερώνει το React πως αυτό το component και τα παιδια του χρειάζεται να γινει re-rendered με το ανανεωμένο state. Αυτή είναι η κύρια μέθοδος που χρησιμοποιείτε για να κάνετε update το user interface σε απόκριση των event handlers και απαντησεις απο servers.

Σκεφτείτε το setState() σα μια αιτηση παρά σαν μια άμεση εντολή για να γίνει update το component. Για ακόμα καλύτερο performance, το React μπορεί να την καθυστερήσει, και κατόπιν να κάνει update αρκετά components σε ενα πέρασμα. To React δεν εγγυάται πως οι αλλαγές στο state θα γινουν άμεσα.

setState() δεν κάνει άμέσα update το component. Μπορεί να συσσωρευσει ειτε και να καθυστερησει το update. Το αποτελεσμα αυτόυ είναι η αναγνωση της this.state ακριβώς αφου καλεσετε την setState() να αποτελει εναν πιθανο κινδυνο. Απεναντιας, χρησιμοποιήστε την componentDidUpdate είτε την setState callback (setState(updater, callback)), οπου και οι δυο είναι εγγυημενες πως θα κληθουν αφου γινει το update. Εαν χρειάζεστε να σετάρετε το state με βαση το προηγουμενο state, διαβάστε για την updater παραμετρο παρακάτω.

setState() παντα θα προκαλεί ενα re-render εκτος και εαν η shouldComponentUpdate() επιστρέψει false. Εαν χρησιμοποιουνται mutable αντικειμενα και η conditional rendering logic δε μπορεί να υλοποιηθεί στην shouldComponentUpdate(), καλώντας την setState() μόνο οταν το νεο state διαφερει απο το προηγουμενο state δε θα προξενησει ανεπιθύμητα re-renders.

Η πρωτη παραμετρος είναι μια updater συνάρτηση με την επομενη signature:

(state, props) => stateChange

state είναι μια αναφορά στο component state τη στιγμή που η αλλαγή εφαρμόζεται. Δεν πρέπει να μπορεί να αλλαχτει άμέσα. Απεναντίας, οι αλλαγές πρέπει να εκπροσωπουνται απο ενα νεο αντικειμενο βασισμενο στην εισοδο των state και props. Για παράδειγμα, υποθέστε πως θέλουμε να αυξήσουμε μια τιμή στο state κατά props.step:

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

Τοσο το state οσο και τα props που ελαβε απο την updater function είναι εγγυημενα να εχουν τιμές up-to-date. Η έξοδος απο τον updater γινεται shallowly merged με το state.

Η δεύτερη παράμετρος της setState() είναι μια προαιρετική callback συνάρτηση η οποία καλείται μια φορά οταν η setState εχει ολοκληρωθει και το component γινεται re-rendered. Γενικώς συνιστούμε να χρησιμοποιείτε την componentDidUpdate() για την υλοποίηση αυτής της λογικης.

Προαιρετικά μπορείτε να περάσετε ενα object σαν πρώτη παράμετρο στο setState() αντι για μια συνάρτηση:

setState(stateChange[, callback])

Αυτή εκτελει ενα shallow merge της stateChange στο νεο state, π.χ., για να ανανεωσει την ποσοτητα στο καλαθι με τα ψωνια ενος αντικειμενου :

this.setState({quantity: 2})

Αυτή η setState() είναι επισης ασυγχρονη, και πολλαπλές κλήσεις κατα τη διαρκεια του ιδιου κυκλου Μπορεί να γινουν batched μαζι. Για παράδειγμα, εαν προσπαθειστε να αυξησετε την ποσοτητα ενος αντικειμενου στον ιδιο κυκλό, αυτό θα εχει σαν αποτελεσμα το ισοδυναμο του:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

Επερχόμενες κλήσεις θα κάνουν override τιμές απο προηγούμενες κλήσεις στον ίδιο κυκλο, ώστε η ποσότητα να αυξηθει μόνο μια φορά. Αν το επόμενο state βασίζεται στο παρόν state, συνιστούμε να χρησιμοποιήστε την updater συνάρτηση :

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

Για περισσότερες λεπτομέρειες, δείτε:


forceUpdate()

component.forceUpdate(callback)

Απο προεπιλογη, οταν το state του component ή οι props αλλάζουν, το component θα γινει re-render. Εαν η render() μέθοδος σας βασιζεται σε καποια δεδομενα, μπορείτε να πειτε στο React πως το component χρειάζεται re-rendering απλά καλώντας την forceUpdate().

Καλωντας την forceUpdate() θα προκαλεσει κληση της render() στο component, παρακαμπτοντας την shouldComponentUpdate(). αυτό θα προξενησει τις φυσιολογικές lifecycle methods των child components, συμπεριλαμβανομένης της shouldComponentUpdate() μεθόδου για κάθε παιδί. Το React θα κάνει update το DOM μόνο αν αλλάξει η markup.

Κανονικά πρέπει να αποφεύγετε τη χρήση της forceUpdate() και μόνο να διαβάζετε την this.props και την this.state μέσα στην render().


Class Properties

defaultProps

defaultProps can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. Για παράδειγμα:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

Εαν η props.color δεν παρέχετε, θα παρει ως προκαθορισμένη τιμή την 'blue':

  render() {
    return <CustomButton /> ; // props.color θα παρει τιμή blue
  }

Εαν props.color εχει σεταριστεί στη τιμη null, τότε θα παραμείνει null:

  render() {
    return <CustomButton color={null} /> ; // props.color παραμενει null
  }

displayName

Το displayName string χρησιμοποιείτε για debugging μηνυματα. συνήθως, δε χρειάζεται να το σετάρετε ρητά γιατί Μπορεί κάνεις να το συμπεράνει απο το ονομα της συνάρτησης ή της κλασης που οριζει το component. Μπορεί να χρειαστει να το σετάρετε ρητά αν θελετε να εμφανιζετε διαφορετικο ονομα για σκοπους debugging ή οταν δημιουργείτε ενα higher-order component, δείτε Wrap the Display Name for Easy Debugging για πληροφοριες.


Instance Properties

props

this.props περιέχει τα props τα οποία ορίστηκαν απο αυτόν που κάλεσε αυτό το component. δείτε Components and Props για μια εισαγωγή στα props.

Πιο συγκεκριμένα, this.props.children είναι ένα σπεσιαλ prop, όπου συνήθως ορίζεται απο τα child tags μέσα στην JSX expression παρα απο το ιδιο το tag.

state

To state περιέχει δεδομενα που είναι συγκεκριμένα για αυτό το component και τα οποία ενδεχεται να αλλάξουν στο πέρασμα του χρόνου. Το state ορίζεται απο το χρήστη και πρέπει να είναι ενα plain JavaScript object.

Εαν κάποια τιμή δε χρησιμοποιείται για rendering ή για το flow των δεδομένων (για παράδειγμα, ενα ID ενος timer) δε χρειάζεται να το βάλετε στο state. Tέτοιες τιμες μπορούν να οριστούν σαν πεδία στο instance του component.

Δείτε State and Lifecycle για περισσότερες πληροφορίες σχετικά με το state.

Ποτέ μην αλλάζετε το this.state απευθείας, γιατί καλώντας την setState() μετά μπορεί να αντικαταστήσει την αλλαγή που κανατε. Συμπεριφερθείτε στο this.state σα να ήτανε αμετάβλητο.