È corretto inserire propTypes e defaultProps come oggetti statici nella classe React?

Question

Questo è il modo che ho fatto per un bel po 'di tempo:

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

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

ma ho visto gente che fa in questo modo:

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

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

E infatti ho visto persone che impostano lo stato iniziale anche al di fuori del costruttore. Questa è una buona pratica? Mi ha infastidito, ma ricordo una discussione da qualche parte in cui qualcuno ha detto che l'impostazione di oggetti di scena predefiniti come statica non è una buona idea - semplicemente non ricordo perché.

Answer 1

Le proprietà non funzionali non sono attualmente supportate per le classi es2015. è una proposta per es2016. il secondo metodo è notevolmente più conveniente, ma sarebbe necessario un plug-in per supportare la sintassi (theres a very common babel plugin for it).

Dall'altra parte, una mano piena di progetti open source sta iniziando a trattare proptype come interfacce TypeScript o ActionConstants e in realtà crea cartelle/file separati che ospitano vari tipi di componenti e vengono quindi importati nel componente.

Quindi, in sintesi, entrambe le sintassi sono accettabili. ma se si desidera utilizzare esclusivamente ES2015, la seconda sintassi non è ancora supportata nelle specifiche.

Answer 2

In effetti, è esattamente lo stesso in termini di prestazioni. React.JS è una tecnologia relativamente nuova, quindi non è ancora chiaro quali siano le buone pratiche o meno. Se si vuole fidarsi di qualcuno, verificare styleguide di questo Airbnb:

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;

Essi dichiarano un const con i propTypes oggetto letterali, tenere la classe piuttosto pulita e assegnarli in seguito alle proprietà statiche. A me personalmente piace questo approccio :)

Answer 3

Se il componente è senza stato, ovvero non cambia affatto il proprio stato, è necessario dichiararlo come componente senza stato (export default function MyComponent(props)) e dichiarare propTypes all'esterno.

Se è buona norma mettere la dichiarazione di stato iniziale nel costruttore, dipende da voi. Nel nostro progetto dichiariamo lo stato iniziale in componentWillMount() solo perché non ci piace il codice super(props) che devi usare con il costruttore.