Skip to content

Latest commit

 

History

History
executable file
·
83 lines (60 loc) · 5.74 KB

differences-to-react.md

File metadata and controls

executable file
·
83 lines (60 loc) · 5.74 KB
name permalink
Unterschiede zu React
/guide/differences-to-react

Unterschiede zu React

Preact selbst soll keine Neuimplementation von React sein. Es gibt durchaus Unterschiede. Viele dieser Unterschiede sind trivial oder können mit der Nutzung von preact-compat komplett entfernt werden. Preact-compat ist eine dünne Schicht, die über Preact liegt und versucht, die 100%ige Kompatibilität mit React herzustellen.

Preact ist nicht darauf ausgelegt, jede einzelne Funktion von React zu übernehmen, um klein und fokussiert zu bleiben - andernfalls würde es mehr Sinn ergeben, simple Optimierungen für das React-Projekt, welches bereits über eine sehr komplexe und gut architektierte Codebasis verfügt, einzureichen.

Versionenkompatibilität

Für Preact und preact-compat gilt: Versionenkompatibilität wird mit den aktuellen und vorherigen Hauptveröffentlichungen von React verglichen. Wenn neue Funktionen vom React-Team angekündigt werden sie, sollten sie mit den Projektzielen im Hinterkopf nützlich sein, zu Preacts Kern hinzugefügt. Dies ist ein recht demokratischer Prozess, der von sich konstant entwickelnden Diskussionen und Entscheidungen der Masse gezeichnet ist. Er lebt von Issues und Pull Requests.

Daher ist von React 0.14.x und 15.x gemeint, wenn auf der Website oder in der Dokumentation von Kompatibilität oder Vergleichen die Rede ist.

Was ist inbegriffen?

  • ES6 Class Components
    • Klassen ermöglichen einen expressiven Weg, zustandsorientierte Komponenten zu definieren
  • High-Order Components
    • Komponenten, die andere Komponenten von render() ausgeben, effektiv sind dies Wrapper
  • Stateless Pure Functional Components
    • Funktionen, die props als Argumente empfangen und JSX/VDOM ausgeben
  • Contexts: Support for context was added in Preact 3.0.
    • Kontext ist eine experimentelle React-Funktion, wurde aber von anderen Bibliotheken adoptiert.
  • Refs: Support for function refs was added in Preact in 4.0. String refs are supported in preact-compat.
    • Refs bieten einen Weg, gerenderte Elemente und Child-Komponenten zu rendern.
  • Virtual DOM Diffing
    • Quasi unabdingbar - Preacts Differenzierung ist simpel, aber effektiv und extrem schnell.
  • h(), eine mehr generalisierte Version von React.createElement
  • Diese Idee hieß ursprünglich hyperscript und war weit über das React-Ökosystem hinaus wertvoll, daher bewirbt Preact den originalen Standard. (Lies: warum h()?)
  • Außerdem ist lesbarer: h('a', { href:'/' }, h('span', null, 'Home'))

Was ist hinzugefügt?

Preact fügt durchaus vereinzelt nützliche Funktionen hinzu, die von dem Schaffen der React-Gemeinde inspiriert sind.

  • this.props und this.state werden an render() weitergegeben
    • Man kann sie immer noch manuell referenzieren. Dieses Vorgehen ist einfach sauberer, insbesondere bei der Destrukturierung
  • Gestapelte Aktualisierungen des DOM, die mit setTimeout(1) zurückgegeben und verglichen werden, (können außerdem requestAnimationFrame verwenden)
  • Man kann einfach class für CSS-Klassen verwenden. className wird zwar immer noch unterstützt, class wird aber präferiert.
  • Komponenten- und Elementenwiederverwendung- und pooling.

Was fehlt?

  • PropType Validierung: Nicht jeder benutzt PropTypes, daher gehören sie nicht Preacts Kern an.
    • PropTypes sind vollständig durch preact-compat unterstützt, können aber auch manuell verwendet werden.
  • Children: Nicht notwendig in Preact, da props.children immer ein Array ist.
  • Synthetische Ereignisse: Preacts Ziel in der Browserunterstützung setzt diesen zusätzlichen Mehraufwand nicht vorraus.
    • Preact nutzt das native addEventListener des Browsers für Ereignishandhabung. Unter GlobalEventHandlers ist eine vollständige Liste an DOM Ereignishandhabungen zu finden.
    • Eine vollständige Ereignisimplementierung würde mehr Wartung, Leistungseinbußen und eine größere API bedeuten.

Was ist anders?

Preact und React haben einige feinere Unteschiede:

  • render() akzeptiert ein drittes Argument, welches der Grundknoten zu replace ist, andernfalls fügt es es hinzu. Dies könnte sich in einer zukünftigen Version ein wenig ändern, vermutlich durch automatische Erkennung der Angemessenheit eines Ersatzrenders mithilfe einer Inspizierung des Grundknotens.
  • Komponenten implementieren contextTypes oder childContextTypes nicht. Children empfangen alle context-Einträge von getChildContext().