React是怎么判断组件是函数式的还是类式声明的

先来说下React组件的声明方式：

// 1.函数式
function Greeting (){}

// 2.class
class Greeting extends Component{}

我们在使用的时候不会关心组件的声明方式，但React会关心

所以接下来就说下React是怎么判断组件是用哪种方式声明的

一.在Component上直接加标记

// Inside React
class Component {}
Component.isReactClass = {};

// We can check it like this
class Greeting extends Component {}
console.log(Greeting.isReactClass); // ✅ Yes

上面是React原先的判断方法，在Component上添加了一个isReactClass属性，如果有这个属性就认为是类式的声明

如果没有就认为是函数式的声明，但是这一些类中，这个flag会丢失，所以就改为了下面这种写法

二.在Component.prototype上加标记

// Inside React
class Component {}
Component.prototype.isReactComponent = {};

// We can check it like this
class Greeting extends Component {}
console.log(Greeting.prototype.isReactComponent); // ✅ Yes

所以只要判断 Greeting.prototype.isReactComponent上是否为{}就可以确定组件的声明方式是function还是class