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

2021-05-12914次阅读React

让我们来看一下这个以函数形式定义的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);

 

上一篇: js如何检测是箭头函数  下一篇: IE浏览器下Promise兼容性处理  

React如何区分Class类组件和Function函数组件相关文章