React的两种方式组件定义差异

Question

我正在进入React，我无法找到，我们应该如何定义React组件。

我们应该使用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 

这两种方法上面介绍是否工作正常，但我不能有什么主要区别（除了语义）？我知道在第二种情况下，我们创建了不可变的组件，因为它被定义为“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