React 如何区分 Class 和 Function？

当我们要渲染一个组件时，通常并不需要关心它是如何定义（是Class还是Function）：

function Greeting() {
  return <p>Hello</p>;
}

class Greeting extends React.Component {
  render() {
    return <p>Hello</p>;
  }

使用

// 是类还是函数 —— 无所谓
<Greeting />

但 React 本身 在意其中的差别！
如果 Greeting 是一个函数，React 需要调用它。

// 我们的代码
function Greeting() {
  return <p>Hello</p>;
}

// React 内部
const result = Greeting(props); // <p>Hello</p>

但如果 Greeting 是一个类，React 需要先用 new 操作符将其实例化，然后 调用刚才生成实例的 render 方法：

// 我们的代码
class Greeting extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}

// React 内部
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // <p>Hello</p>

那React内部是如何区分Class和Function呢？
答案是：React.Component.prototype.isReactComponent**标记
React在原型上找到 isReactComponent，就会把组件当做类处理。

// React 内部
class Component {}
Component.prototype.isReactComponent = {};

// 检测
class Greeting extends Component {}
console.log(Greeting.prototype.isReactComponent); // ✅ Yes

更多细节请阅读Dan的原文