リアクションのコンポーネント定義の相違点

Question

私はリアクトに入っていますが、私はリアクションコンポーネントをどのように定義すべきかを知ることができません。

は、我々は次のようES6クラス定義を使用する必要があります。

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 

をするか、次のようにそれを実行します。

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

export default DateFormatter 

どちらの方法は、上記の正常に動作しているが、私は主な違いであるものを手に入れることができません（意味論を除く）？ 2番目のケースでは、constとして定義されている不変のコンポーネントを作成することがわかります。

Answer 1

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

export default DateFormatter 

これは機能コンポーネントです。それは状態がありません。それは、供給されるデータを（小道具を介して）レンダリングするだけです。

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 

これはクラスコンポーネントです。それは状態を有し、一般的に機能コンポーネントよりも複雑です。

通常、コンポーネント階層の最上部にいくつかのクラスコンポーネントがあります。あなたが多くなるほど、機能的なコンポーネントを見つけることができます。クラスコンポーネントから渡されたデータをレンダリングします。

Answer 2

はい、それは重複ポストですが、最終的に明確にするため、この表記は関数表記です：

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

export default DateFormatter 

と次と等しい：

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

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

export default DateFormatter