2016-03-29 3 views
4

die ES6 Syntax für React Komponente zu schaffen ist export default class ExampleComponent extends React.Component .Allerdings es immer noch, dass, wenn import React from 'react'export default class ExampleComponent ohne extends React.Component unter der Bedingung arbeiten; Warum das passierterstrecken sich nicht React.Component

+0

Ersteres hat Zugriff auf Lebenszyklusmethoden (z. B. 'componentDidMount'), während letzteres nicht funktioniert; es ist eine statische Komponente. – lux

+1

@lux Letzteres hat Zugriff auf 'rendern' überprüfen Sie diese https://github.com/gaearon/flux-react-router-beispiel – Guigui

+0

Und nur 'render()', laut der Dokumentation: https: // facebook. github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components -> '" Diese Komponenten verhalten sich genau wie eine React-Klasse, wobei nur eine Rendermethode definiert ist "' – lux

Antwort

3

Es ist einfach, in dieser Situation zu sein und zu verpassen, was passiert, aber der Unterschied ist wirklich riesig: Ohne React.Component erweitern Sie nur eine JS-Klasse. Außerdem:

  • , weil es den Anforderungen einer Reaktion Klasse erfüllt (die Sie entweder mit React.createClass() oder als ES6 Klasse erstellen kann), es werde noch „arbeiten“,
  • aber werden Sie nicht bekomme lifeCyle Methoden oder Zugang zu state (jemand korrigiert mich, wenn ich falsch liege, ziemlich sicher, würdest du nicht mit nur einer Klasse bc, es gibt keine Backing-Instanz angehängt).
  • Diese "einfacheren" Komponenten sind in der Regel schneller für React und benötigen weniger "Maschinen", da sie nur eine (hoffentlich) reine Funktion sind, die etwas rendert.
  • so ist der Hauptunterschied hier, dass mit nur einer Klasse, die eine Rendermethode hat, Sie nicht so viel "erfordern". das sollte reichen am meisten der Zeit; Sie sollten keinen Zugriff auf state für alles benötigen

Hoffe, dass hilft!

+0

React Dokumentation auf Dieses Thema: https://facebook.github.io/react/docs/state-and-lifecycle.html. Ich stimme @markthethomas zu. Aus der Dokumentation: "... als Klassen definierte Komponenten haben einige zusätzliche Funktionen. Der lokale Zustand ist genau das: eine Funktion, die nur für Klassen verfügbar ist." Die Dokumente geben dies nicht explizit für Lebenszyklus-Hooks an, aber das gleiche gilt eindeutig für diese. –

0

Sie erstellen ein "reines" JavaScript class, aber sobald es eine React.Component nicht erweitert wird, können Sie nicht auf bestimmtes React-Verhalten zugreifen. Überprüfen Sie how extends work.

+0

überprüfen Sie diese https://github.com/gaearon/flux-react -router-Beispiel, eine Menge von React-Komponente React.Component nicht erweitern, aber immer noch gut funktioniert – Guigui

+0

Ich glaube, das ist wegen dieser veralteten Bibliothek: https://github.com/gaearon/react-pure-render –

Verwandte Themen