如何检测组件是 React component 或者 React Element？

React 中的组件（通常指的是类组件或函数组件）和元素在概念上是不同的：

• React 组件：是构造 React 元素的蓝图。它可以是一个类，也可以是一个函数，它接受 props 并返回 React 元素，表示在屏幕上应该渲染什么。
• React 元素：是 React 应用中不可变的对象描述，它是组件的实例化结果，通常是通过 JSX 或 React.createElement 创建。

检测它们可以通过以下方式：

检测 React 组件

检测一个变量是否是 React 组件可以通过检查它的类型和属性。例如，类组件通常有 isReactComponent 属性，而函数组件是函数类型但没有这个属性。

javascript
function isReactComponent(component) {
  // 类组件的特征是 prototype 上有 isReactComponent 属性
  return (
    component.prototype && 
    component.prototype.isReactComponent
  ) || (
    // 函数组件可能是纯函数，检查它不是一个普通的 HTML 元素构造函数
    typeof component === 'function' &&
    String(component).includes('return React.createElement')
  );
}

注意，这个函数在某些情况下可能不够健壮，因为函数组件可能不包含 return React.createElement 字符串，特别是如果它们直接返回 JSX。

检测 React 元素

检测一个对象是否是 React 元素可以通过检查它是否有特定的 $$typeof 属性。React 元素对象通常有一个 $$typeof 属性，该属性的值为 Symbol.for('react.element')。

javascript
function isReactElement(element) {
  return (
    element !== null &&
    typeof element === 'object' &&
    element.$$typeof === Symbol.for('react.element')
  );
}

使用 Symbol.for('react.element') 比较是 React 官方推荐的方式，因为这个 symbol 是 React 元素内部的标记，用于区分普通对象和 React 元素。

请记住，这些方法可能不是完全准确的，并且随着 React 库的更新，它们的行为可能会改变。在实践中，通常是通过组件的使用上下文来隐含地知道它是组件还是元素，而不是通过这种检测方法。