如何反应才能识别它是 class 组件还是功能组件？

Question

我在我的 React App 中创建了两个组件，一个是 class 组件，另一个是功能组件。 但是当它调用组件时，react 如何识别它是 class 组件还是功能组件？

这是面试官提出的问题

Answer 1

但是当它调用组件时，react 如何识别它是 class 组件还是功能组件？

// Who is a class component and who is a functional component?
ReactDOM.render(
  <>
    <ComponentA />
    <ComponentB />
    {React.createElement(ComponentA)}
    {React.createElement(ComponentB)}
  </>,
  document.getElementById('root')
);

虽然JSX 代表 objects ，如文档中所述，它们是等价的：

从 React 的角度来看，上述两个组件是等价的。

但实际上，React 检查isReactComponent标志以确定它是 class 组件还是 function 组件：

// @ ReactComponent.js
ReactComponent.prototype.isReactComponent = {};

// @ ReactFiber.js
function shouldConstruct(Component: Function) {
  const prototype = Component.prototype;
  return !!(prototype && prototype.isReactComponent);
}

有关更深入的解释，请查看Dan Abramov 的博客文章。

Answer 2

React 检查组件的isReactComponent标志（存在于React.Component.prototype 源上）以确定天气它是 class 还是 function。

您可以在此处详细了解它： https://overreacted.io/how-does-react-tell-a-class-from-a-function/