當我們要渲染一個組件時，通常並不需要關心它是如何定義（是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的原文