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

【问题标题】：How does React know if a function component is a React component?React 如何知道函数组件是否是 React 组件？
【发布时间】：2018-09-18 21:52:58
【问题描述】：

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

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

【问题讨论】：

“定义组件的最简单方法是编写一个 JavaScript 函数。”如果函数至少接受一个 prop，那么 React 会将其识别为函数式组件。来源：reactjs.org/docs/components-and-props.html

标签： javascript reactjs

【解决方案1】：

这是isValidElement() 函数的代码。简而言之，他们检查它是否是带有$$typeof 的REACT_ELEMENT_TYPE 符号的对象（函数是对象）。

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

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

【讨论】：

我认为你没有抓住重点，isValidElement() 不能确定无状态函数是否有效。
确实，这就是为什么我在此之外提到的原因，这并不重要，因为任何功能都可以工作。
但是函数组件可以在没有明确的render() 方法的情况下使用。所以，只要它们返回可接受的返回值，它们就可以工作？
@JaySeeCode 准确。

【解决方案2】：

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

反应元素。通常通过 JSX 创建。元素可以是原生 DOM 组件 () 的表示形式，也可以是用户定义的复合组件 ()。
字符串和数字。这些在 DOM 中呈现为文本节点。
门户。使用 ReactDOM.createPortal 创建。
空。不渲染。
布尔值。什么都不渲染。（主要是为了支持返回测试 && 模式，其中 test 是布尔值。）
片段（有效元素的数组）

因此，除非您不返回 undefined，否则它应该可以工作，但如前所述，如果它是一个函数，它将始终执行它。

【讨论】：

【解决方案3】：

但它 IS 是一个普通的 javascript 函数。它只是返回一个值，然后由 React 解释。

编辑：为了帮助您理解，您需要记住，在 JavaScript 中，所有事物（当然基本类型除外）都是对象（类、函数、数组等），最后都是一样的。

【讨论】：