reactjs - 返回 JSX 的函数和类组件有什么区别？

Question

创建返回 JSX 的函数和创建扩展 Component 的类有什么区别？

// Syntax ES6/7

const Banner = (()=>(
  <div>
    My Awesome Component
  </div>
));

class Poster extends Component { // or createClass
  render() {
    <div>
      My Awesome Component
    </div>
  }
}

1. 返回 JSX 的函数真的就是我们所说的 React Element，而不是组件吗？

2. 如果上述说法不正确，那么返回 JSX 的函数是否只是一个没有状态的组件？

3. 如果以上都不成立，那么它们被称为什么？

Answer 1

“返回 jsx 的函数”和(无状态)功能组件 (SFC) 之间存在重要区别。

鉴于此功能:

const Banner = (()=>(
  <div>
    My Awesome Component
  </div>
));

你无法判断这是一个函数组件还是一个返回 JSX 的函数。 这个函数可以是它们两个。

当你像这样使用它时:

<Banner />

功能Banner用作功能组件(SFC)。

此外，像这样使用:

<div>{Banner()}/div>

函数 Banner 用作返回 JSX 的函数。

SFC 和返回 JSX 的函数都返回 JSX(又名 React Component 或 React Node)。 但是:

• sfc 接受 props 参数
• 这些 props 是随 React 运行时提供的。

另一方面，

• 返回 JSX 的函数不需要参数。
• 函数返回 JSX 的参数提供了使用代码

实际获得的vdom(React Node)根据使用的不同而有所不同。