What is the difference between FC, Styled, Class components in React?

Question

React

Hello.
What is the difference between FC(func component), lFC(lambdaFC), Styled(styled``), Class-base(class ext React.C) components in React?
I create components in different ways and then output to the console:
Method 1 (lambdaFC):

spoiler

const lFC = ()=>{
 return (
 	<div>I'm lFC</div>
 )
}

результат

lFC =  () => {
  return React.createElement(
    'div',
    null,
    'I\'m lFC'
  );
}

Method 2 (FC):

spoiler

function FC(){
 return(
 	<div>I'm FC</div>
 )
}

результат

FC =  ƒ FC() {
  return React.createElement(
    'div',
    null,
    'I\'m FC'
  );
}

Method 3 (Class):

spoiler

class CC extends React.Component {
componentDidMount(){
  alert(hi)
}
  render() {
    return (
    <div>I'm CC</div>
    )
  }
}

результат

CC =  class CC extends React.Component {
  componentDidMount() {
    alert(hi);
  }
  render() {
    return React.createElement(
      'div',
      null,
      'I\'m CC'
    );
  }
}

Method 4 (Styled):

spoiler

STYLED =  
> {$$typeof: Symbol(react.forward_ref), render: ƒ, attrs: Array(0), componentStyle: ComponentStyle, displayName: "comp__StyledDiv", …}

It turns out:

spoiler

А. Разницы между 1 и 2 нет
Б. Использование Styled внутри функциональных компонентов overhead. Но тогда как использовать темы? А ведь хотелось бы по максимуму "упростить" приложение c использованием FC, те использовать React - View, Redux - Controller, Store - Model

Answer 1

You made a pointless comparison. All that can be learned from this method is that component instances are created by calling React.createElement. But it's in the documentation.
Class components have lifecycle methods, state, and the ability to work with context. Functional components achieve similar functionality using the Hooks API.
Using StyledComponent in functional components is not overhead. They are just wrappers for your components. In the console, you see the result of calling React.forwardRef. The call is needed in order to pass the ref to the wrapped component as a property, otherwise, when you try to get the ref, you would get a wrapper component.
The most simple applications are usually Todo sheets and other HelloWorldApp. In reality, the application will most likely be much more complicated.
FLUX is not exactly MVC.