vs {Comp ()} или даже {Comp}: почему дополнительные React внутренние узлы даром? - PullRequest
Новая
       20

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

1 голос
/ 05 мая 2019

У меня есть множество простых функциональных компонентов 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() или заключены в mobx-react-lite observer(), которые сами добавляют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, который я нашел, но ответ кажется мне неполным.

Чего мне не хватает / не понятно?

...