React Components - Was ist der richtige Weg, um sie zu erstellen?

Question

Ich lerne React und stieß auf zwei verschiedene Wege, um Komponenten zu erstellen. Einer ist von Facebook und der andere von AirBnB. Ich sah sie auch in den Tutorials, die ich mir angesehen habe.

Das mag eine dumme Frage sein, aber welche ist besser?

Facebook:

var React = require("react"); 

var Component = React.createClass({ 
    render: function(){ 
     return (
      <div>{this.props.item}</div> 
     ); 
    } 
}); 

module.exports = Component; 

AirBnB:

import React from "react"; 

export default class Component extends React.Component { 
    render() { 
     return (
      <div>{this.props.item}</div> 
     ); 
    } 
} 

Haftungsausschluss: ich Fehler im Code haben, so bitte vergib mir und konzentrieren sich nur auf den Stil.

Answer 1

Komponenten reagieren:

Sie haben 4 grundlegende Möglichkeiten zur Herstellung eines reusable React component erstellen:

• React.createClass({}) - th Der alte Weg, erfordert nicht transpiling, aber da Sie wahrscheinlich JSX verwenden, müssen Sie sowieso transpilieren. Wird immer noch in alten React-Lernprogrammen angezeigt, wird aber möglicherweise als veraltet eingestuft.

• class MyComponent extends React.Component {} - die ES6-Art von Erstellen einer Stateful-Komponente. Erfordert das Transpilieren über Babel, das auch JSX behandelt. Wenn Sie State- und Lifecycle-Methoden benötigen, verwenden Sie dies.

• class MyComponent extends React.PureComponent {} - neu in React 15.3.0. Dasselbe wie React.Component, aber mit einer PureRenderMixin ähnlichen Funktionalität, da ES6-Komponenten keine Mixins unterstützen.

• const MyComponent =() => {} oder function MyComponent() - zustandslose Komponente ohne Lebenszyklusmethoden. Benötigt das Transpilieren , wenn Sie es mit der Pfeilfunktion erstellen. Verwenden Sie es für einfache Anzeige Komponenten.

JS Module:

NodeJS Syntax (Commonjs) verwendet require() und ES6 import verwendet. Sie können verwenden, was Sie wollen, und sogar die beiden mischen, aber die ES6-Module Weg der Import/Export ist ein bisschen mehr "Standard" für die Reaktionskomponenten. Vorerst wird import tatsächlich von babel zu require sowieso transpiliert. Sowohl als auch import benötigen eine Art Bündelungswerkzeug wie webpack oder browserify, um in einem Browser zu arbeiten.

Render() vs .render:

Die render() ES6 ist die Art und Weise, ein Verfahren in ES6 Klassen definieren.

React.createClass({}) erfordert ein JS-Objektliteral. In ES5 verwendet die Definition von Methoden in Objektliteralen die prop: function() {}-Syntax, z. B. render: function() Syntax. btw - In ES6 können Sie die Methode stattdessen im Literal als render() schreiben.

Answer 2

Der von AirBnB verwendet einen ES6-Weg, würde aber einen Transpiler wie Babel benötigen.

ES6 ist die nächste Revision der Javascript Sprache

Lesen Sie mehr: https://toddmotto.com/react-create-class-versus-component/