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