React如何区分Class类组件和Function函数组件

让我们来看一下这个以函数形式定义的Greeting组件：

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

React也支持将他定义成一个类：

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

当你要渲染一个 <Greeting /> 组件时，你并不需要关心它是如何定义的：

// 是类还是函数 —— 无所谓
<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的目标都是去获取渲染后的节点（在这个案例中，<p>Hello</p>）。但具体的步骤取决于Greeting是如何定义的。

所以React是怎么知道组件是class类组件还是function函数组件的呢？

1、检查Greeting是否是React.Component的继承类

class A {}
class B extends A {}

console.log(B.prototype instanceof A); // true

2、Greeting.prototype.isReactComponent属性

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

// 我们可以像这样检查它
class Greeting extends Component {}
console.log(Greeting.prototype.isReactComponent); // ✅ 是的

或者Try catch。

let isReactComponent = false;
try {
    if((Greeting.prototype as any).isReactComponent){
        isReactComponent = true;
    }
} catch (error) {
    
}
console.log('isReactComponent value',isReactComponent);