‹Comp /› против {Comp()} или даже {Comp}: зачем лишние внутренние узлы React даром?

У меня есть много простых функциональных компонентов React, таких как эти:

const Icon = (p:{icon:string}) => <i className={'fas fas-'+icon}/>
const Foo = () => <div>test1 <p>test2</p></div>
const X = () => (
  <div>
    <Foo />
    <Icon icon='test' />
  </div>
)

В моей кодовой базе большинство из них используют memo() или завернуты в observer() mobx-react-lite, которые сами добавляют memo()

Вот как в основном все это делают, но я думаю, что это намного лучше в большинстве сценариев:

const icon = (icon:string) => <i className={'fas fas-'+icon}/>
const foo = <div>test1 <p>test2</p></div>
const X = () => (
  <div>
    {foo}
    {icon('test')}
  </div>
)
icon

потому что я вижу очень мало причин для создания этих дополнительных реагирующих внутренних узлов DOM и оплаты всех событий жизненного цикла и т. д.

конечно, React.createElement помогает с:

управление сложным сценарием (useEffect, состояние, границы ошибок и т. д.)
обеспечивает помещения реквизитом
дает красивые имена в дереве
...

но в большинстве случаев в этом нет необходимости. Повсюду я вижу, как люди создают больше узлов, чем нужно, а затем добавляют еще больше оберток, чтобы попытаться заставить React делать как можно меньше, и в процессе они запутывают свой код (дважды пишут имена компонентов из-за JSX, добавляют бесполезные функции, синтаксис и др.).

В моих примерах выше я не вижу НИКАКОЙ причины, кроме более красивого имени в дереве компонентов, и я почти уверен, что мог бы просто найти способ предоставить имя по дешевке.

Почему люди всегда пишут что-то вроде A1 и B1, когда A2 и B2 проще, быстрее, лучше, логичнее во многих сценариях?

const A1 = () => <div />
const B1 = () => <div><A1 /></div>

const A2 = <div />
const B2 = <div>{A2}</div>

сгенерированный код:

var A1 = function A1() { return React.createElement("div", null); };
var B1 = function B1() { return React.createElement("div", null, React.createElement(A1, null)); };

var A2 = React.createElement("div", null);
var B2 = React.createElement("div", null, A2);

Вот предыдущий вопрос о SO, который я нашел, но ответ кажется мне совершенно неполным.

Что я упускаю/не понимаю?

Rvion 04.05.2019 источник

‹Comp /› против {Comp()} или даже {Comp}: зачем лишние внутренние узлы React даром?

Похожие вопросы