问题

下面的方法2是如何工作的？

高级

我最近遇到了两种定义无状态功能ReactJS组件的不同方法（两者都很好）：

• 方法1:

  1. const Greet1 = function () {...}
  2. Greet1.propTypes = {...}
  3. export default Greet1

• 方法2:

  1. Greet2.propTypes = {...}
  2. export default function Greet2 () {...}

方法1对我来说很有意义：我们从定义Greet1开始，然后添加/修改其属性。

方法2是我不明白的。在定义Greet2本身之前，我们怎么可能被允许在Greet2中添加/修改属性？

（或者它更像是JavaScript的基础知识，而不是ReactJS特有的？）

详细示例

假设我有一个ReactJS GreetContainer，它封装了单独的表示组件Greet1和Greet2。

GreetContainer

这是GreetContainer.js-一个（可以是有状态的）容器组件，用于包装Presentation Components:

import React, { PropTypes } from 'react'
import { Greet1, Greet2 } from 'components'
const GreetContainer = React.createClass({
  render () {
    return (
      <div>
        <Greet1 message="This is Greet1"/>
        <Greet2 message="This is Greet2"/>
      </div>
    )
  },
})
export default GreetContainer

贪婪1

这是Greet1.js-一个（无状态）呈现组件（我理解）：

import React, { PropTypes } from 'react'
const Greet1 = function ({message}) {
  return (
    <div>
      <p>{message}</p>
    </div>
  )
}
Greet1.propTypes = {
  message: PropTypes.string.isRequired
}
export default Greet1

贪婪2

这就是Greet2.js——一个（无状态）呈现组件（我不太理解——在定义Greet2本身之前指定Greet2的属性对我来说没有意义？）：

import React, { PropTypes } from 'react'
Greet2.propTypes = {
  message: PropTypes.string.isRequired
}
export default function Greet2 ({message}) {
  return (
    <div>
      <p>{message}</p>
    </div>
  )
}

更新-关于JavaScript吊装

下面提供的答案表明方法2是有效的，因为JavaScript默认使用提升（将声明提升到代码顶部）。

尽管有这种默认行为，W3SchoolsJavaScript-Hlifting表示，在使用变量之前声明变量是一种很好的做法。所以我创建了Greet3（经过测试和工作）——我想这可能是一个比Greet1和Greet2更好的模式。

import React, { PropTypes } from 'react'
function Greet3 ({message}) {
  return (
    <div>
      <p>{message}</p>
    </div>
  )
}
Greet3.propTypes = {
  message: PropTypes.string.isRequired
}
export default Greet3

Greet2.propTypes = {...}
export default function Greet2 () {...}

function Greet2 () {...}
Greet2.propTypes = {...}
export default Greet2;