Шаблоны проектирования в React

[okhn]

Спасибо большое за статью. Но все же не приходит ко мне понимание того, когда лучше использовать «передачу свойств вниз по дереву», Провайдеры или render props…

[Wentris]

Из личного опыта:
1. Передачу свойств (лифтинг) использую для дечерних компонентов, когда есть родительский компонент в который приходят реальные данные от instance.

<Grid>{rows.map(row => <Row title={row.title}/>)}</Grid>

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

2. С провайдером очень просто. Наиболее частое использование — для страниц роутера. когда в центральный роутер рендерятся компоненты относительно текущего location

class SampleComp extends Component {
    render() {
      return <div>...</div>;
    }
};
const mapStateToProps = state => {
   return {
      prop: state.prop
   }
}
const mapDispatchToProps = dispatch => ({});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SampleComp));

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

3. render props — хороший прием, скажем, если в гриде нужно разные кастомизированые типы елементов (<Avatar/>, возможно <Avatar/> + name + surName… etc) и не хочется замусоривать базовый компонент <Grid/> набором непонятно каких стилей или пропсов… тогда проще создать функцию которая принимает весь row или же целевой value

return <div>{ formatter ? formatter(row, row[keyName]) : row[keyName] || '—' }</div>

а функция колбек может быть описана очень либерально

formatter: (row, value) => <Avatar firstName={value} url={row.authorAvatarUrl}/>

[alex6636]

Глаза кровоточат от смеси js и html. Туда бы ещё инлайнового css добавить

[friday]

Styled components, пожалуйста :-)

[TheShock]

Дайте угадаю, начинали с php?