Question

我在React App中创建了两个组件，一个是类组件，另一个是功能组件。但是，如何反应才能确定何时将该组件称为类组件或功能组件？

这是采访者问的一个问题

Answer 1

但是当调用该组件是类组件还是功能组件时，如何反应才能识别？

// 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等效：

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

但是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。

Answer 2

对组件isReactComponent（在React.Component.prototype source上）进行检查，以确定天气是类还是函数。

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

如何确定它是类组件还是功能组件？

2 个答案: