创建一个返回jsx的函数和创建一个Component类之间的区别是什么？

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

您可以将组件类称为React组件。它具有属性，状态，渲染方法以及您熟悉的东西。

另一方面，Functional Component类似于无状态组件。也就是说，它不会保持状态，可能会提高您的性能。所有这样的函数都返回一个JSX元素;它实际上是一个没有封装类的独立渲染方法。

Answer 2

'函数返回jsx'和（无状态）功能组件（SFC）之间存在重要区别。

鉴于此功能：

const Banner =（（）=＆gt;（        我很棒的组件    ））;

你不能说这是一个功能组件或返回jsx的函数。 这个功能可以是他们两个。

当像这样使用时：

＆lt; Banner /＆gt;

功能Banner用作功能组件（SFC）。 此外，使用这样：

＆LT; DIV＆GT; {横幅（）}＆LT; / DIV＆GT;

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

sfc和函数返回JSX都返回JSX（又名React Component或React Node）。 但是：

• sfc采取道具参数
• 道具提供了React运行时。

另一方面，

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

实际获得的vdom（React Node）根据使用的不同而不同。