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

最新推荐文章于 2025-07-06 08:30:27 发布

原创最新推荐文章于 2025-07-06 08:30:27 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了React中组件的两种声明方式：函数式组件和类组件，并深入探讨了React如何通过在Component.prototype上添加标记来判断组件的声明类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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