use(): der neue experimentelle Haken von React

Das React-Team und die JavaScript-Gemeinschaft diskutieren über einen Hook namens use und ich sehe einen großen Hype um diese neue Funktion. Sehen Sie sich an, wie man ihn implementiert und welche Möglichkeiten es in naher Zukunft geben wird.

---

React hat ein GitHub-Repositorium namens RFC, was für Request for Comments steht. Es ist ein großartiger Ort, an dem Sie über die neuen Funktionen diskutieren können, die das React-Team in den React-Kern einbauen möchte, oder einfach nur über die von der Community vorgeschlagenen Ideen.

Und einer hat speziell zahlreiche Interaktionen genannt:

Erstklassige Unterstützung für Versprechen und async/await

 

Was soll das bedeuten?

- Unterstützung erster Klasse - bedeutet, dass der von Ihnen erstellte Code als Variable auf der Stammebene Ihrer Anwendung verwendet werden kann.

- promises und async/await - Funktionen, die schwere Aufgaben oder externe Aufrufe verarbeiten.

Im Grunde sprechen wir also über die Verwendung von Versprechen auf der Root-Ebene Ihrer Anwendung und in einem React-Fall über die direkte Verwendung von Versprechen innerhalb von Komponenten.

Dies eröffnet zahllose Möglichkeiten, wie z.B. das Abrufen von Serverdaten vor dem Rendern der Komponente. Aber sehen wir uns den ersten Vorteil an, der die meisten Entwickler betreffen wird, nämlich die Verringerung der Boilerplate-Datenabfrage.

Nur ein Hinweis: Es handelt sich immer noch um eine experimentelle Funktion, also halten Sie sich mit der Verwendung in der Produktion zurück, denn die API könnte sich ändern oder sogar in der nächsten React-Version nicht mehr enthalten sein. Aber es ist eine gute Gelegenheit, die Möglichkeiten in der Entwicklung zu testen.

 

Bereiten Sie das Projekt vor

Ich verwende ein Vite + React Boilerplate-Projekt mit Typescript.

# terminal
yarn create vite

 

Um diese neuen Funktionen nutzen zu können, müssen wir die experimentelle Version von React und React-DOM installieren.

# terminal inside your project folder
yarn add react@experimental react-dom@experimental

 

Fügen Sie den experimentellen Typ hinzu; andernfalls beschwert sich typescript, dass der neue Verwendungshaken nicht existiert.

// tsconfig.json
"compilerOptions": {
  // ... other configs 
  "types": ["react/experimental"]
}

 

[Vorher] Wie rufen wir heutzutage Daten ab?

Fügen Sie innerhalb der src/App.tsx eine gewöhnliche Abrufanfrage ein.

  // src/App.tsx
  import { useEffect, useState } from "react";

  type Product = {
    title: string
  }

  function App() {
    const [product, setProduct] = useState<Product>();

    useEffect(()=>{
      fetch('https://dummyjson.com/products/1')
        .then(res => res.json())
        .then(json => setProduct(json))
    },[])

    if(!product) return <div>Loading...</div> 

    return (
      <div>{product.title}</div>
    )
  }

  export default App

 

[Nach] Wie sieht der neue Verwendungshaken aus?

  // src/App.tsx
  import { use } from "react";

  type Product = {
    title: string
  }

  const getProduct = fetch('https://dummyjson.com/products/1').then(res => res.json())

  function App() {
    const product = use<Product>(getProduct)
    if(!product) return <div>Loading...</div> 

    return (
      <div>{product.title}</div>
    )
  }

  export default App

 

Wir können ganz klar einige große Vorteile erkennen:

• kein useState
• keine useEffects
• einfachere API

 

Aber es gibt noch ein weiteres verstecktes Verhalten.

Wenn wir eine console.log in unserer Produktvariable wie folgt hinzufügen:

const product = use<Product>(getProduct)
console.log(product)

 

Wir werden sehen, dass das Produkt niemals undefiniert ist.

Ein weiterer interessanter Aspekt ist, dass dieser Haken vor dem Rendering der Komponente erfolgt und es daher möglich ist, if-Anweisungen hinzuzufügen, bevor Sie den Haken wie hier definieren.

  // src/App.tsx
  import { use } from "react";

  type Product = {
    title: string
  }

  const getProduct = fetch('https://dummyjson.com/products/1').then(res => res.json())
  const beforeHook = false

  function App() {
    if(beforeHook) return <div>if before hooks are also ok</div>
    const product = use<Product>(getProduct)
    if(!product) return <div>Loading...</div> 

    return (
      <div>{product.title}</div>
    )
  }

  export default App

Neue Möglichkeiten

Der Grund dafür ist, dass dieser Hook vor dem ersten Rendering stattfindet, was bedeutet, dass React Unterstützung bieten kann - für serverseitige Komponenten, indem Sie diesen Aufruf einfach in Ihre Komponente einfügen - diese React-Komponente in einen anderen Chunk aufteilen, indem Sie einfach async

Unbekannte

Die Community entscheidet immer noch - wie mit Fehlern umgegangen werden soll - ob Statuskontrollen wie "ausstehend", "abgelehnt" hinzugefügt werden - Leute, die mit diesem Konzept nicht einverstanden sind, weil es die Komplexität innerhalb von React erhöht, das eine Bibliothek und kein Framework sein will.

Fazit

Schließlich arbeiten das React-Team und die Community hart daran, bessere Lösungen für Fetching und Server-Komponenten zu entwickeln. Das bedeutet, dass wir bald eine viel einfachere Lösung haben werden , um Fetching-Daten nativ mit Unterstützung von Server-Komponenten zu steuern.

 

Kommende Meetups

Wir haben auch 2 große Javascripts-Treffen, die bald stattfinden werden:

• Mittwoch, 9. November - AdvancedJS Amsterdam (Wibaut Office), veranstaltet von Marten de Groot
• Mittwoch, 16. November - JS Eindhoven (Microlab-Büro) auf Einladung von Hernani Fernandes