Unterschied in zwei Möglichkeiten Komponentendefinition für React

Question

Ich bin in React und ich kann nicht herausfinden, wie wir React-Komponenten definieren sollten.

Sollte verwenden wir ES6 Klassendefinition wie folgt vor:

import React from 'react' 
import PropTypes from 'prop-types' 

class DateFormatter extends React.Component { 
    constructor (props) { 
    super(props) 
    this.date = props.date 
    } 
    render() { 
    return (<h2>It is {this.date.toLocaleTimeString()}.</h2> 
    ) 
    } 
} 
DateFormatter.propTypes = { 
    date: PropTypes.object 
} 

export default DateFormatter 

oder es tun wie folgt vor:

export const DateFormatter = ({ date }) => (
    <div> 
    <h2>It is {date.toLocaleTimeString()}</h2> 
    </div> 
) 
DateFormatter.propTypes = { 
    date: PropTypes.object 
}; 

export default DateFormatter 

Beide Wege oben arbeiten richtig präsentiert, aber ich kann nicht bekommen, was der Hauptunterschied (außer semantisch)? Ich weiß, dass wir im zweiten Fall eine unveränderliche Komponente erzeugen, die als "const" definiert ist.

Answer 1

export const DateFormatter = ({ date }) => (
    <div> 
    <h2>It is {date.toLocaleTimeString()}</h2> 
    </div> 
) 
DateFormatter.propTypes = { 
    date: PropTypes.object 
}; 

export default DateFormatter 

Dies ist eine funktionale Komponente. Es hat keinen Staat. Es gibt nur die Daten aus, mit denen es versorgt wird (über Requisiten).

import React from 'react' 
import PropTypes from 'prop-types' 

class DateFormatter extends React.Component { 
    constructor (props) { 
    super(props) 
    this.date = props.date 
    } 
    render() { 
    return (<h2>It is {this.date.toLocaleTimeString()}.</h2> 
    ) 
    } 
} 
DateFormatter.propTypes = { 
    date: PropTypes.object 
} 

export default DateFormatter 

Dies ist eine Klassenkomponente. Es hat einen Zustand und ist in der Regel komplexer als funktionale Komponenten.

Im Allgemeinen würden Sie einige Klassenkomponenten an der Spitze Ihrer Komponentenhierarchie haben. Je mehr Sie nach unten gehen, desto mehr finden Sie funktionale Komponenten. Sie rendern die Daten von den Klassenkomponenten.

Answer 2

Ja, es Post dupliziert, aber für die endgültige Klärung dieser Notation ist funktional Notation:

export const DateFormatter = ({ date }) => (
    <div> 
    <h2>It is {date.toLocaleTimeString()}</h2> 
    </div> 
) 
DateFormatter.propTypes = { 
    date: PropTypes.object 
}; 

export default DateFormatter 

und ist gleich mit folgenden:

var DateFormatter = function({date}) { 
    return <div><h2>It is {date.toLocaleTimeString()}</h2></div>; 
} 

DateFormatter.propTypes = { 
    date: PropTypes.object 
}; 

export default DateFormatter