В чем разница между FC, Styled, Class компонентами в React?

Question

[Ostic]

Здравствуйте.
В чем разница между FC(func component), lFC(lambdaFC), Styled(styled``), Class-base(class ext React.C) компонентами в React?
Создаю компоненты разными способами и потом вывожу в консоль:
Способ 1 (lambdaFC):

spoiler

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

результат

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

Способ 2 (FC):

spoiler

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

результат

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

Способ 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'
    );
  }
}

Способ 4 (Styled):

spoiler

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

Получается:

spoiler

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

Answer 1

[Антон Спирин]

У вас бессмысленное сравнение получилось. Все, что можно вынести из этого способа, это то, что экземпляры компонентов создаются вызовом React.createElement. Но это есть в документации.
Классовые компоненты имеют методы жизненного цикла, состояние и возможность работы с контекстом. Функциональные компоненты достигают подобного функционала при использовании Hooks API.

Использование StyledComponent в функциональных компонентах не overhead. Это просто обертки над вашими компонентами. В консоли вы видите результат вызова React.forwardRef. Вызов нужен для того, чтобы передать оборачиваемому компоненту ref как свойство, иначе при попытке получить ref вы бы получили компонент обертку.

По-максимуму простые приложения это обычно Todo листы и прочие HelloWorldApp. Реально приложение скорей всего будет в разы сложней.

FLUX это не совсем MVC.

Comments

[Ostic]

У вас абсолютно бессмысленное сравнение получилось.

Пытаюсь разобраться...

Классовые компоненты имеют методы жизненного цикла, состояние и возможность работы с контекстом.

Смотрите, ведь нет никаких Class, ведь это "синтаксический сахар" - в конце-то одно получается, что вызвать

var obj = new function className(props){
  this.props = props;
}

как я понимаю:
1. FC - это "чистая" функция, которая принимает параметры (props) и возвращает
компонент полученный React.createElement с этими параметрами - правильно? (вариант 1,2) И всё.
2. В остальных случаях(вариант 3,4) возвращается объект, у которого есть метод render, который и есть, собственно, FC (те FC - это просто метод render "умного" компонента). И, естественно, получается, что в объекте при вызове метода render мы можем сравнивать что-то с предыдущим "чем-то" (состоянием, свойствами, ещё чем), а в случае чистой функции мы ничего подобного не имеем - правильно?
И получается, что оборачивая FC в Styled мы теряем все прелести FC - или нет?

[Антон Спирин]

Ostic,

Смотрите, ведь нет никаких Class, ведь это "синтаксический сахар" - в конце-то одно получается, что вызвать

Нет прототипом будет React.Component, а в нем много чего реализовано:

function CC() {
   React.Component.apply(this, arguments);  // получаем props, refs, context, updater
}

CC.prototype = Object.create(React.Component.prototype); // получаем setState и forceUpdate

CC.prototype.componentDidMount = function() {
  alert('hi');
}

CC.prototype.render = function() {
  return React.createElement('div', null, 'I\'m CC');
}

А библиотека получая класс будет работать с компонентом по другому сценарию, в частности вызывать на нем методы жизненного цикла.

1. Это функция, которая при вызове возвращает результат вызова React.createElement с теми параметрами, которые вы передадите в своей функции, не обязательно "чистой".
2. Если React.CreateElement получает при вызове класс, то создается экземпляр класса и вызываются определенные методы жизненного цикла.

spoiler

И, естественно, получается, что в объекте при вызове метода render мы можем сравнивать что-то с предыдущим "чем-то" (состоянием, свойствами, ещё чем), а в случае чистой функции мы ничего подобного не имеем - правильно?

Все немного не так. При обновлении компонента(обновление состояния, обновление родительского древа) вызов методов жизненного цикла может дойти до render, а может не дойти.

И получается, что оборачивая FC в Styled мы теряем все прелести FC - или нет?

У FC нет каких-либо прелестей, которые можно было бы потерять. С другой стороны с помощью Hooks API функциональные компоненты могут получить функционал похожий на функционал классовых компонентов.

[Ostic]

Антон Спирин,

Нет прототипом будет React.Component, а в нем много чего реализовано:

это понятно, но можно всё это реализовать не используя слово class, точнее всё, что делается в class использует банальные function, prototype...
а хуки как реализованы? если FC чистый, то откуда тогда берутся хуки?
похоже на какой-то callbacks

[Антон Спирин]

Ostic, классы используют из-за их удобства. Библиотека как писал выше работает с классовыми и функциональными компонентами по разным сценариям.

Хуки - внутренняя магия React. Во время вызова хука библиотека знает какой компонент она отрисовывает и какой по счету хук в этом компоненте она вызывает. По этим данным React возвращает нужный результат.

Функциональные компоненты это не обязательно чистые функции.

let counter = 0;

const Dirty = () => <div>{counter++}</div>;