Γιατί το React16 είναι μια ευλογία για τους προγραμματιστές του React

Όπως ακριβώς οι άνθρωποι ενθουσιάζονται για την ενημέρωση των εφαρμογών και των λειτουργιών τους για κινητά, οι προγραμματιστές θα πρέπει επίσης να είναι ενθουσιασμένοι για την ενημέρωση των πλαισίων τους. Η νέα έκδοση των διαφορετικών πλαισίων έρχεται με νέα χαρακτηριστικά και κόλπα έξω από το κουτί.

Ακολουθούν μερικές από τις καλές λειτουργίες που πρέπει να λάβετε υπόψη κατά τη μετεγκατάσταση της υπάρχουσας εφαρμογής σας στο React 16 από το React 15.

Ώρα να πείτε αντίο React15;

Σφάλμα χειρισμού

Το React 16 εισάγει τη νέα έννοια ενός ορίου σφάλματος .

Τα όρια σφάλματος είναι στοιχεία αντιδράσεων που εντοπίζουν σφάλματα JavaScript οπουδήποτε στο θυγατρικό δέντρο. Καταγράφουν αυτά τα σφάλματα και εμφανίζουν μια εναλλακτική διεπαφή χρήστη αντί για το σύνθετο δέντρο συνιστωσών. Τα όρια σφαλμάτων εντοπίζουν σφάλματα κατά την απόδοση, σε μεθόδους κύκλου ζωής και σε κατασκευαστές ολόκληρου του δέντρου κάτω από αυτά.

Ένα στοιχείο κλάσης γίνεται όριο σφάλματος εάν ορίζει μια νέα μέθοδο κύκλου ζωής που ονομάζεται componentDidCatch(error, info):

Στη συνέχεια, μπορείτε να το χρησιμοποιήσετε ως κανονικό συστατικό.

Η componentDidCatch()μέθοδος λειτουργεί σαν catch {}μπλοκ JavaScript , αλλά για στοιχεία. Μόνο τα στοιχεία της κλάσης μπορούν να είναι όρια σφάλματος. Στην πράξη, τις περισσότερες φορές θα θέλετε να δηλώσετε ένα στοιχείο ορίου σφάλματος μία φορά. Στη συνέχεια, θα το χρησιμοποιήσετε σε όλη την εφαρμογή σας.

Σημειώστε ότι τα όρια σφαλμάτων εντοπίζουν μόνο σφάλματα στα στοιχεία που βρίσκονται κάτω από αυτά στο δέντρο . Ένα όριο σφάλματος δεν μπορεί να εντοπίσει κάποιο σφάλμα. Εάν ένα όριο σφάλματος αποτύχει να αποδώσει το μήνυμα σφάλματος, το σφάλμα θα μεταδοθεί στο πλησιέστερο όριο σφάλματος πάνω από αυτό. Αυτό είναι επίσης παρόμοιο με τον τρόπο catch {}λειτουργίας του μπλοκ σε JavaScript.

Δείτε τη ζωντανή επίδειξη:

Για περισσότερες πληροφορίες σχετικά με το χειρισμό σφαλμάτων, επισκεφθείτε εδώ.

Νέοι τύποι απόδοσης απόδοσης: θραύσματα και συμβολοσειρές

Απαλλαγείτε από το τύλιγμα του εξαρτήματος σε ένα div κατά την απόδοση.

Τώρα μπορείτε να επιστρέψετε μια σειρά στοιχείων από τη renderμέθοδο ενός στοιχείου . Όπως και με άλλους πίνακες, θα πρέπει να προσθέσετε ένα κλειδί σε κάθε στοιχείο για να αποφύγετε την προειδοποίηση κλειδιού:

render() { // No need to wrap list items in an extra element! return [ // Don't forget the keys :) 
  • First item
  • ,
  • Second item
  • ,
  • Third item
  • , ];}

    Ξεκινώντας με το React 16.2.0, έχει υποστήριξη για μια ειδική σύνταξη θραυσμάτων στο JSX που δεν απαιτεί κλειδιά.

    Υποστήριξη για την επιστροφή χορδών:

    render() { return 'Look ma, no spans!';}

    Πύλες

    Οι πύλες παρέχουν έναν τρόπο πρώτης κατηγορίας για να καταστήσουν τα παιδιά σε έναν κόμβο DOM που υπάρχει εκτός της ιεραρχίας DOM του γονικού στοιχείου.

    ReactDOM.createPortal(child, container)

    Το πρώτο όρισμα ( child) είναι οποιοδήποτε αποδοτικό παιδί React, όπως στοιχείο, συμβολοσειρά ή θραύσμα. Το δεύτερο όρισμα ( container) είναι ένα στοιχείο DOM.

    Πως να το χρησιμοποιήσεις

    Όταν επιστρέφετε ένα στοιχείο από τη μέθοδο απόδοσης ενός στοιχείου, προσαρτάται στο DOM ως θυγατρικό του πλησιέστερου γονικού κόμβου:

    render() { // React mounts a new div and renders the children into it return ( {this.props.children} );}

    Μερικές φορές είναι χρήσιμο να εισαγάγετε ένα παιδί σε διαφορετική τοποθεσία στο DOM:

    render() { // React does *not* create a new div. It renders the children into `domNode`. // `domNode` is any valid DOM node, regardless of its location in the DOM. return ReactDOM.createPortal( this.props.children, domNode );}

    Μια τυπική περίπτωση χρήσης για πύλες είναι όταν ένα γονικό στοιχείο έχει overflow: hiddenή z-indexστυλ, αλλά χρειάζεστε το παιδί να "ξεσπάσει" οπτικά από το κοντέινερ του. Για παράδειγμα, διαλόγους, κάρτες hovercards και συμβουλές εργαλείων.

    Προσαρμοσμένο χαρακτηριστικό DOM

    Το React15 χρησιμοποιείται για να αγνοήσει τυχόν άγνωστα χαρακτηριστικά DOM. Απλώς θα τους έλειπε αφού το React δεν το αναγνώριζε.

    // Your code: 

    Θα έδινε ένα κενό div στο DOM με το React 15:

    // React 15 output: 

    Στο React16, η έξοδος θα είναι η ακόλουθη (τα προσαρμοσμένα χαρακτηριστικά θα εμφανίζονται και δεν θα αγνοούνται καθόλου ):

    // React 16 output: 

    Αποφύγετε την εκ νέου απόδοση με ρύθμιση NULL σε κατάσταση

    Με το React16 μπορείτε να αποτρέψετε τις ενημερώσεις κατάστασης και να κάνετε επανεκδόσεις απευθείας από setState(). Απλά πρέπει να επαναφέρετε τη λειτουργία σας null.

    const MAX_PIZZAS = 20;function addAnotherPizza(state, props) { // Stop updates and re-renders if I've had enough pizzas. if (state.pizza === MAX_PIZZAS) { return null; } // If not, keep the pizzas coming! :D return { pizza: state.pizza + 1, }}this.setState(addAnotherPizza);

    Διαβάστε περισσότερα εδώ.

    Δημιουργία Ref

    Η δημιουργία refs με το React16 είναι τώρα πολύ πιο εύκολη. Γιατί πρέπει να χρησιμοποιήσετε αναφορές:

    • Διαχείριση εστίασης, επιλογής κειμένου ή αναπαραγωγής πολυμέσων.
    • Ενεργοποίηση επιτακτικών κινούμενων εικόνων.
    • Ενσωμάτωση με βιβλιοθήκες DOM τρίτων.

    Refs are created using React.createRef() and are attached to React elements via the refattribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

    class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ; }}

    Accessing Refs

    When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.

    const node = this.myRef.current;

    The value of the ref differs depending on the type of the node:

    • When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.
    • When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current.
    • You may not use the ref attribute on functional components because they don’t have instances.

    Context API

    Context provides a way to pass data through the component tree without having to pass props down manually at every level.

    React.createContext

    const {Provider, Consumer} = React.createContext(defaultValue);

    Creates a { Provider, Consumer } pair. When React renders a context Consumer, it will read the current context value from the closest matching Provider above it in the tree.

    The defaultValue argument is only used by a Consumer when it does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause Consumers to use defaultValue.

    Provider

    A React component that allows Consumers to subscribe to context changes.

    Accepts a value prop to be passed to Consumers that are descendants of this Provider. One Provider can be connected to many Consumers. Providers can be nested to override values deeper within the tree.

    Consumer

     {value => /* render something based on the context value */}

    A React component that subscribes to context changes.

    Requires a function as a child. The function receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().

    static getDerivedStateFromProps()

    getDerivedStateFromProps is invoked right before calling the render method. Both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

    This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a on> component that compares its previous and next children to decide which of them to animate in and out.

    Deriving state leads to verbose code and makes your components difficult to think about.

    Make sure you’re familiar with simpler alternatives:

    • If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.
    • If you want to re-compute some data only when a prop changes, use a memoization helper instead.
    • If you want to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.

    This method doesn’t have access to the component instance. If you’d like, you can reuse some code between getDerivedStateFromProps() and the other class methods by extracting pure functions of the component props and state outside the class definition.

    Note that this method is fired on every render, regardless of the cause. This is in contrast to UNSAFE_componentWillReceiveProps. It only fires when the parent causes a re-render and not as a result of a local setState.

    We compare nextProps.someValue with this.props.someValue. If both are different then we perform some operation, setState

    static getDerivedStateFromProps(nextProps, prevState){ if(nextProps.someValue!==prevState.someValue){ return { someState: nextProps.someValue}; } else return null;}

    It receives two params nextProps and prevState. As mentioned previously, you cannot access this inside this method. You’ll have to store the props in the state to compare the nextProps with previous props. In above code nextProps and prevState are compared. If both are different then an object will be returned to update the state. Otherwise null will be returned indicating state update not required. If state changes then componentDidUpdate is called where we can perform the desired operations as we did in componentWillReceiveProps.

    Bonus: React Lifecycle events

    Lifecycle credits — //twitter.com/dceddia

    Well these are some of the features that you should definitely try while working with React16!

    Happy coding ? ?