javascript - react 如何识别它是类组件还是功能组件？

Question

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

面试官问的问题

Answer 1

But how react can identify when it calls the component it's a class component or functional component?

// 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 represents objects , 作为 stated in docs它们是等价的:

The above two components are equivalent from React’s point of view.

但是actually , react 检查 isReactComponent flag判断它是类组件还是函数组件:

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

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

如需更深入的解释，请查看Dan Abramov's blog post .