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

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

2 个答案: