先来说下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