Ist es in Ordnung, PropTypes und DefaultProps als statische Requisiten in der React-Klasse zu platzieren? Diese

Question

ist die Art, wie ich es schon seit geraumer Zeit jetzt gerade:

export default class AttachmentCreator extends Component { 
    render() { 
    return <div> 
     <RaisedButton primary label="Add Attachment" /> 
    </div> 
    } 
} 

AttachmentCreator.propTypes = { 
    id: PropTypes.string, 
}; 

Aber ich habe Leute gesehen, es auf diese Weise tun:

export default class AttachmentCreator extends Component { 
    static propTypes = { 
    id: PropTypes.string, 
    }; 

    render() { 
    return <div> 
     <RaisedButton primary label="Add Attachment" /> 
    </div> 
    } 
} 

Und in der Tat Ich habe gesehen, Leute, die den Ausgangszustand auch außerhalb des Konstruktors setzen. Ist das eine gute Praxis? Es nervt mich, aber ich erinnere mich an eine Diskussion irgendwo, wo jemand gesagt hat, dass das Setzen von Standardrequisiten als statische Idee keine gute Idee ist - ich kann mich einfach nicht erinnern warum.

Answer 1

Nicht-Funktionseigenschaften werden derzeit für es2015-Klassen nicht unterstützt. es ist ein Vorschlag für es2016. Die zweite Methode ist wesentlich bequemer, aber ein Plugin wäre erforderlich, um die Syntax zu unterstützen (theres a very common babel plugin for it). Auf der anderen Seite beginnt eine Hand voller Open-Source-Projekte, Propietypen wie TypeScript-Interfaces oder ActionConstants zu behandeln und tatsächlich separate Ordner/Dateien zu erstellen, die verschiedene Property-Typen enthalten und dann in die Komponente importiert werden.

Also zusammenfassend sind beide Syntaxen in Ordnung zu verwenden. Wenn Sie jedoch ausschließlich ES2015 verwenden möchten, wird die letztere Syntax in der Spezifikation noch nicht unterstützt.

Answer 2

In der Tat ist es in Bezug auf die Leistung genau das gleiche. React.JS ist eine relativ neue Technologie, daher ist noch nicht klar, was als gute Praktiken angesehen werden oder nicht. Wenn Sie jemanden vertrauen möchten, überprüfen Sie dieses AIRBNB der Styleguide:

https://github.com/airbnb/javascript/tree/master/react#ordering

import React, { PropTypes } from 'react'; 
 

 
const propTypes = { 
 
    id: PropTypes.number.isRequired, 
 
    url: PropTypes.string.isRequired, 
 
    text: PropTypes.string, 
 
}; 
 

 
const defaultProps = { 
 
    text: 'Hello World', 
 
}; 
 

 
class Link extends React.Component { 
 
    static methodsAreOk() { 
 
    return true; 
 
    } 
 

 
    render() { 
 
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a> 
 
    } 
 
} 
 

 
Link.propTypes = propTypes; 
 
Link.defaultProps = defaultProps; 
 

 
export default Link;

Sie deklarieren eine const mit den propTypes Literale Objekt, halten die Klasse ziemlich sauber und ordnen sie später zu den statischen Eigenschaften. Ich persönlich mag diesen Ansatz :)

Answer 3

Wenn die Komponente zustandslos ist, dh sie ändert ihren eigenen Zustand überhaupt nicht, sollten Sie sie als zustandslose Komponente deklarieren (export default function MyComponent(props)) und die propTypes außerhalb deklarieren.

Ob es eine gute Übung ist, die anfängliche Statusdeklaration in den Konstruktor zu setzen, bleibt Ihnen überlassen. In unserem Projekt deklarieren wir den Anfangszustand in componentWillMount(), nur weil wir die super(props) Vorabversion nicht mögen, die Sie mit dem Konstruktor verwenden müssen.