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

Posted 2023-02-19

【中文标题】React的两种方式组件定义的区别[重复]

【英文标题】：Difference in two ways component definition for React [duplicate]

【发布时间】：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”。

【参考方案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