为什么React要区分Class和function定义的组件？

React内部是通过调用组件的定义来获取被渲染的节点，而对于不同的组件定义方式，其获取节点的步骤也不一样。如下：

//function方式定义
function Example() {
  return <div>this is a div</div>;
}

const node = Example(props);

// 类方式定义
class Example extends React.Component {
  render() {
    return <div>this is a div</div>;
  }
}

const instance = new Example(props);
const node = instance.render();

在这里，函数直接调用，类则需要先实例化再去调用实例化对象上的render方法；

如果将类按照普通函数去调用会怎么样呢？答案是会报错；

在早期没有类的时候，我们用构造函数来代替它，如果不用new去调用这个构造函数，它不会报错，但函数内部的this将会指向全局等。这可以不用new来调用构造函数的情况，很容易让人分不清构造函数和普通函数。
es6给出了类的概念，《ECMAScript 6 入门》中提到过：

类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

那么如果给函数也加上new会怎么样呢？

这里有两个问题：
=> 箭头函数用new调用会报错。这么设计是因为箭头函数中this不指向自身，而是指向离它们最近的常规函数。没有了this，它作为构造函数的用法也就变得毫无意义了。
=> 另一种情况是如果函数返回不是对象，那么该返回值无用。JavaScript允许用户在使用new去实例化对象时，用return的对象来代替本该由new返回的对象。但如果返回的不是对象，它会被忽略；

综上所述，因为类和函数自身的区别导致了它们必须要被分开调用；

文章参考：https://overreacted.io/how-does-react-tell-a-class-from-a-function/