Как реагировать может определить, это компонент класса или функциональный компонент?

Question

Я создал два компонента в своем приложении React: один компонент класса, а другой функциональный компонент. Но как реагировать может определить, когда он вызывает компонент, это компонент класса или функциональный компонент?

Это вопрос, задаваемый интервьюером

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 представляет объекты , как указано в документах они эквивалентны:

Вышеупомянутые два компонента эквивалентны с точки зрения React.

Но на самом деле ,Реагируйте на проверку isReactComponent флаг , чтобы определить, является ли это компонентом класса или компонентом функции:

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

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

Для более подробного объяснения проверьте Сообщение Дана Абрамова в блоге .

Answer 2

Реактивно проверьте компонент на наличие флага isReactComponent (который присутствует в React.Component.prototype source ), чтобы определить, является ли это классом или функцией.

Вы можете прочитать об этомподробно здесь: https://overreacted.io/how-does-react-tell-a-class-from-a-function/