React如何知道函数组件是否是React组件？

Question

React支持类和函数组件。所有React文件的顶部都有import React from ‘react’语句。在创建类组件（如：class MyClassComponent extends React.Component ...）时，会明确提到此类实例扩展自哪个类。但是，在声明一个函数组件（const MyFunctionComponent = () => ()）时，没有明确地说“嘿，这是一个React组件”。

据我们所知，这可能是普通JavaScript中的一个函数。那么，React如何将函数识别为函数组件？

Answer 1

如果它返回有效类型，则不会这样做，每个函数都有效。但是，React不会静态检查一个函数是否会返回一些有效的东西，所以它只是运行它，如果它是一个函数。在较新的React版本中，返回值几乎可以是所有内容。数组现在工作，也是字符串。目前，React支持以下类型作为返回值：

• 反应元素。通常通过JSX创建。元素可以是本机DOM组件（）的表示，也可以是用户定义的组合组件（）。
• 字符串和数字。它们在DOM中呈现为文本节点。
• 门户。使用ReactDOM.createPortal创建。
• 空。什么都没有。
• 布尔。什么都没有。 （主要用于支持返回测试和＆amp;＆amp;模式，其中test是布尔值。）
• Fragment（有效元素数组）

所以，除非你没有返回undefined，否则它应该有效，但正如所说，如果它是一个函数，它将始终执行它。

Answer 2

以下是isValidElement()功能的代码。简而言之，他们使用$$typeof符号REACT_ELEMENT_TYPE检查它是否是一个对象（函数是对象）。

除此之外，它是否是正常功能并不重要。在大多数情况下，即使我做了一些随机函数，只要它具有render()函数，它就可以用作React元素。我不确定他们是否检查过生命周期功能缺失，但是如果他们这样做了，那么它会起作用（如果他们不这样做，就会抛出错误）。

当谈到JavaScript“继承”时，它总是归结为对象的形状是否与预期的形状匹配。

Answer 3

但 IS 是一个简单的javascript 功能。它只返回一个值，然后由React解释。

编辑：为了帮助您理解，您需要记住，在JavaScript中，一切（当然除了原始类型）对象（类，函数，数组等）最终都是一样的。