Warum React16 ein Segen für React-Entwickler ist

Genau wie die Leute begeistert sind, ihre mobilen Apps und Betriebssysteme zu aktualisieren, sollten Entwickler auch begeistert sein, ihre Frameworks zu aktualisieren. Die neue Version der verschiedenen Frameworks bietet sofort neue Funktionen und Tricks.

Im Folgenden finden Sie einige der guten Funktionen, die Sie bei der Migration Ihrer vorhandenen App von React 15 auf React 16 berücksichtigen sollten.

Zeit, sich zu verabschieden React15?

Fehlerbehandlung

In Reaktion 16 wird das neue Konzept einer Fehlergrenze eingeführt .

Fehlergrenzen sind Reaktionskomponenten, die JavaScript-Fehler an einer beliebigen Stelle in ihrem untergeordneten Komponentenbaum abfangen. Sie protokollieren diese Fehler und zeigen anstelle des abgestürzten Komponentenbaums eine Fallback-Benutzeroberfläche an . Fehlergrenzen fangen Fehler beim Rendern, in Lebenszyklusmethoden und in Konstruktoren des gesamten Baums darunter ab.

Eine Klassenkomponente wird zu einer Fehlergrenze, wenn sie eine neue Lebenszyklusmethode mit dem Namen definiert componentDidCatch(error, info):

Dann können Sie es als reguläre Komponente verwenden.

Die componentDidCatch()Methode funktioniert wie ein JavaScript- catch {}Block, jedoch für Komponenten. Nur Klassenkomponenten können Fehlergrenzen sein. In der Praxis möchten Sie die meiste Zeit eine Fehlergrenzkomponente einmal deklarieren. Dann werden Sie es in Ihrer gesamten Anwendung verwenden.

Beachten Sie, dass Fehlergrenzen nur Fehler in den Komponenten abfangen, die im Baum darunter liegen . Eine Fehlergrenze kann keinen Fehler in sich selbst erfassen. Wenn eine Fehlergrenze beim Rendern der Fehlermeldung fehlschlägt, wird der Fehler auf die nächstgelegene Fehlergrenze darüber übertragen. Auch dies ähnelt der Funktionsweise von catch {}Block in JavaScript.

Schauen Sie sich die Live-Demo an:

Weitere Informationen zur Fehlerbehandlung finden Sie hier.

Neue Render-Rückgabetypen: Fragmente und Zeichenfolgen

Vermeiden Sie es, die Komponente beim Rendern in ein Div zu verpacken.

Sie können jetzt ein Array von Elementen aus der renderMethode einer Komponente zurückgeben . Wie bei anderen Arrays müssen Sie jedem Element einen Schlüssel hinzufügen, um die Schlüsselwarnung zu vermeiden:

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

    Ab React 16.2.0 wird eine spezielle Fragment-Syntax für JSX unterstützt, für die keine Schlüssel erforderlich sind.

    Unterstützung für die Rückgabe von Zeichenfolgen:

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

    Portale

    Portale bieten eine erstklassige Möglichkeit, untergeordnete Elemente in einen DOM-Knoten zu rendern, der außerhalb der DOM-Hierarchie der übergeordneten Komponente vorhanden ist.

    ReactDOM.createPortal(child, container)

    Das erste Argument ( child) ist ein renderbares untergeordnetes React-Element, z. B. ein Element, eine Zeichenfolge oder ein Fragment. Das zweite Argument ( container) ist ein DOM-Element.

    Wie man es benutzt

    Wenn Sie ein Element aus der Rendermethode einer Komponente zurückgeben, wird es als untergeordnetes Element des nächsten übergeordneten Knotens in das DOM eingebunden:

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

    Manchmal ist es nützlich, ein Kind an einer anderen Stelle im DOM einzufügen:

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

    Ein typischer Anwendungsfall für Portale ist, wenn eine übergeordnete Komponente einen overflow: hiddenoder z-index-Stil hat, das untergeordnete Element jedoch visuell aus seinem Container „ausbrechen“ muss. Zum Beispiel Dialoge, Hovercards und Tooltips.

    Benutzerdefiniertes DOM-Attribut

    React15 wird verwendet, um unbekannte DOM-Attribute zu ignorieren. Es würde sie einfach überspringen, da React es nicht erkannte.

    // Your code: 

    Würde mit React 15 ein leeres Div in das DOM rendern:

    // React 15 output: 

    In React16 lautet die Ausgabe wie folgt ( benutzerdefinierte Attribute werden angezeigt und überhaupt nicht ignoriert ):

    // React 16 output: 

    Vermeiden Sie ein erneutes Rendern, indem Sie NULL in den Status setzen

    Mit React16 können Sie Statusaktualisierungen und erneutes Rendern ab sofort verhindern setState(). Sie müssen nur Ihre Funktion zurückgeben 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);

    Lesen Sie hier mehr.

    Refs erstellen

    Das Erstellen von Refs mit React16 ist jetzt viel einfacher. Warum müssen Sie refs verwenden:

    • Verwalten des Fokus, der Textauswahl oder der Medienwiedergabe.
    • Imperative Animationen auslösen.
    • Integration in DOM-Bibliotheken von Drittanbietern.

    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

    Original text


    Lifecycle credits — //twitter.com/dceddia

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

    Happy coding ? ?