功能组件是否已变成引擎盖下的类组件？

Question

I find a bit of a discrepancy in React docs. In the section on Components and Props , they explain, through the example of a functional Welcome component, that

React calls the Welcome component with {name: 'Sara'} as the props.

Fair enough, given that the component is a pure function . Then in State and Lifecycle , they mention, through the example of a class Clock component, that

React calls the constructor of the Clock component. [...] React then calls the Clock component's render() method.

From reading the docs, as well as this Medium post , with functional components,

1. the component is invoked directly as a function with props object
2. it returns a React element, ie an object that models the DOM element(s) to be rendered
3. React DOM then creates and inserts a DOM node to the "real" DOM

The flow is different with class-based components:

1. the component class is instantiated and the object instance is stored in memory
2. the render method is invoked and the React element (object) is returned
3. the React element, backed by its class instance, is used by React DOM to generate and mount an actual DOM node

The big difference, according to the article, is that "function components don't have instances", meaning that they are invoked directly. React DOM "just uses the invocation of the function to determine what DOM element to render for the function".

However, this is incogruent with other sources. For instance, here and here Dan Abramov mentions that functional components are classes internally. In other words, React will just wrap a functional component into a class and instantiate it, as if it were a class component. Another article goes as far as saying that the former are even slower than the latter.

Question

• Are functional components converted into class components by React?
• Is there (yet) any performance benefits to using functional, rather than class components? (eg here it says no benefits yet, I assume before React Fiber?)
• Should I really sacrifice my workflow, if I could have state across the app, where it would logically fit in, eg a form/controlled component somewhere deep down the tree?

Answer 1

Are functional components converted into class components by React?

There is no “optimized” support for them (functional component) yet because stateless component is wrapped in a class internally. It's same code path.

From a twitter thread by Dan Abramov.

Is there any performance benefits to using functional, rather than class components?

Apparently right now there is no performance benefits because React does a lot of things on Functional Components which decreases performance. Read this to gain more understanding.

Should I really sacrifice my workflow

I guess not