Ответы на распространённые вопросы о шаблоне render prop

[justboris]

Уважаемые читатели! Пользуетесь ли вы шаблоном render props в своих React-проектах?

Пользовался еще до того, как это стало мейнстримом. Допустим, у нас есть компонент для рендеринга списков:

<MyList items={items} renderItem={item => <span>{item.name}</span>}>

задавать шаблон функции для рендеринга элемента списка казалось настолько естественным, что я даже не думал называть это "шаблоном render props"

[cyber_ua]

А в чем плюс, по сравнению с таким подходом?

<List>
 {(data) => {
    return <Item data={data} />
  }}
 </List>

[justboris]

1. Нужно обязательно писать парный закрывающий тег, лишняя писанина
2. Труднее читать. Render prop можно назвать подходящим по смыслу именем, например <List renderItem={data => <Item />}>, а children так и останутся анонимными.
3. Легче допустить ошибку. Вы не поверите, но вот это — валидный JSX, линтеры молчат:

<List>
 {(data) => <Item data={data} />}
 {(data) => <Item data={data} />}
</List>

Изначальный смысл специального свойства children был в том, чтобы JSX-разметка выглядела как html. Функция как контент смотрится странновато. Почему в React ввели именно такой синтаксис для нового Context API — непонятно.

[mayorovp]

Вот именно затем, чтобы JSX-разметка выглядела как html. Чтобы не писать один тэг внутри атрибута другого тэга, а тот — внутри атрибута третьего.

[justboris]

Вот это похоже на разметку, здесь children имеют смысл

<List>
  <Item />
  {props.something}
  <Item />
</List>

А вот здесь какая-то дичь:

<List>
  {(data) => <div>
      <Item />
     {data.something}
     <Item />
    </div>
  }}
</List>

Здесь фигурных скобочек и других значков больше, чем собственно чего-то похожего на html.

[mayorovp]

А вот здесь — еще большая дичь:

<List render={(data) => <div>
      <Item />
     {data.something}
     <Item />
    </div>
  }} />

[justboris]

Ну я же уже показал, чем именно использование свойства render лучше. Из двух дичей я выбираю меньшую.

[mayorovp]

Может и лучше, но на разметку это похоже еще меньше.

[justboris]

На самом деле, если у нас вместо примитивного html идут сложные компоненты, может лучше вообще отказаться от JSX и перейти на plain JS

const Layout = React.createElement.bind(React, LayoutComponent);
// ...
render() {
   return Layout({
     left: () => <div></div>,
     right: () => <div></div>
   });
}

Простой JS вписывается здесь намного лучше, чем JSX, где надо все свойства оборачивать в скобки {}. Предполагаю, что в 2018 году мы еще увидим тренд на подобный JSX-less React.