React的两种方式组件定义的区别[重复]答案

【问题标题】：Difference in two ways component definition for React [duplicate]React的两种方式组件定义的区别[重复]
【发布时间】：2017-10-28 22:43:45
【问题描述】：

我正在研究 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”。

【问题讨论】：

标签： reactjs ecmascript-6 components

【解决方案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

这是一个类组件。它有一个状态，通常比功能组件更复杂。

通常，您的组件层次结构顶部会有一些类组件。你越往下走，你就会发现越多的功能组件。它们呈现从类组件传递下来的数据。

【讨论】：

好的，非常感谢！

【解决方案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

【讨论】：