@react_js
React — русскоговорящее сообщество

Обсуждаем React.js и экосистему. См. также: @reactnative_ru, @apollo_ru, @protonnative_ru, @nodejs_ru, @js_ru, @uiux_ru Вакансии и поиск работы: @javascript_jobs Правила: http://bit.ly/our_etiquette Sponsored with ❤️ by www.axept.co

5822 members

React — русскоговорящее сообщество

Последние сообщения

08:27:49 ДП
User 108543364
User 150513139
такой вопрос
<img src={'./images/icons/' + props.icon + '.svg'}>
вот если у меня компонента тянет иконки таким образом, можно ли как-то в вэбпаке описать что бы он их находил и тянул в dist?
Посмотри как у material-UI сделано, они вообще инлайнят иконку
08:29:45 ДП
User 108543364
User 128801948
А если в mobx фильтровать лист из N элементов в рендере, то сколько слушателей будет неявно зарегистрировано? Например отображается по 10 элементов из 10000.
Для 10к элементов используй react-list, а то браузер сдохнет
08:29:55 ДП
User 1340580
User 108543364
Не надо такие вещи в редаксе хранить. Там нужно хранить только данные которые должны шарится между компонентами
Ну он это шарит как раз.
08:30:47 ДП
User 108543364
Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню
08:31:51 ДП
User 108543364
User 108543364
Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню
Например нормализованный пользователь, чтобы аватарка во всех компонентах одна и та же была
08:32:28 ДП
User 143141567
User 108543364
Шарить состояние UI-компонента? Я в редаксе только бизнес-данные храню
если где то в другом месте есть кнопка  'скрыть хедер'
08:32:47 ДП
User 1340580
User 143141567
если где то в другом месте есть кнопка  'скрыть хедер'
Да.
08:33:25 ДП
User 152745946
а если сегодня нет, а завтра есть?)
08:39:05 ДП
User 128801948
User 108543364
Для 10к элементов используй react-list, а то браузер сдохнет
отображаться то будет мало элементов после фильтрации, не больше 10, но вот mobx придётся зарегистрировать N+1 слушателей, и каждый раз после инвалидации канселить всех слушателей в текущем контексте и на рендере опять создавать N+1 слушателей и регистрировать.
08:40:12 ДП
User 128801948
или может я просто плохо знаю mobx, и там есть какие-то костыли чтоб разруливать подобные кэйсы )
08:40:56 ДП
User 152745946
а в родителе не вариант подписку сделать?)
08:41:55 ДП
User 128801948
так в родителе и будет делаться подписка
08:47:08 ДП
User 152745946
хотя, если использовать react-list, или аналоги, можно делать подписку и в дочерних элементах. Они же по 10-20шт будут рендриться
08:47:38 ДП
User 128801948
а толку, если от изменения какого-то свойство может получиться что теперь нужно отобразить элемент после фильтрации
08:48:05 ДП
User 128801948
традиционно большинство проблем с производительностью в сложных приложениях на всяких дататэйблах, и традиционно системы с неявными подписками на них сосут
08:52:02 ДП
User 152745946
любой инструмент надо использовать прямыми руками)
08:52:51 ДП
User 128801948
ну так я и спрашиваю, как же такой типичный юзкэйс решать в mobx :)
09:16:52 ДП
User 143141567
Если у меня есть компонент, который обернут в connect, я этот connect получаю через refs в родительском компоненте. Я как то могу достучаться до самого компонента, который обернут в connect?
09:29:34 ДП
User 143141567
Нашел
09:30:31 ДП
User 143141567
При коннекте компонента надо в объекте options передать {withRef: true}, тогда можно получить нужный коммент методом getWrappedInstance
09:33:50 ДП
User 152745946
Народ, что вы думаете про использование контекстов для меню? Вот у меня есть выпадающий список, у него есть разделители и вообще произвольная структура. Нормально, если SelectList будет передавать свой контекст в SelectListItem, чтобы установить текущий активный элемент, например, по ховеру?
09:35:28 ДП
User 202047214
Может есть какое-то элегантное решение без использования редакс стейта? У меня есть компонент лейаута, которому можно передать хтмл для попапа. Они все отрисуются в доме обернув себя в оверлей. И внутри самого попапа мне нужно по скроллу менять его состояние, при этом оверфлоу скролл висит на оверлее и соответственно обработчик должен висеть на нем.
09:40:16 ДП
User 185980313
User 152745946
Народ, что вы думаете про использование контекстов для меню? Вот у меня есть выпадающий список, у него есть разделители и вообще произвольная структура. Нормально, если SelectList будет передавать свой контекст в SelectListItem, чтобы установить текущий активный элемент, например, по ховеру?
Подразумевается передача функции в компонент?
09:40:56 ДП
User 152745946
User 185980313
Подразумевается передача функции в компонент?
да и активный индекс элемента, например
09:42:21 ДП
User 152745946
<SelectList start={0} end={2}>
  <div>
    <SelectListItem index={0} />
    <SelectListItem index={1} />
    <SelectListItem index={2} />
  </div>
</SelectList>
09:42:33 ДП
User 152745946
вот так примерно выглядит API компонентов этих
09:46:07 ДП
User 185980313
Мы используем похожий подход, но тут спорно, хорошо ли это
09:46:41 ДП
User 152745946
согласен, и тут вопрос - какие еще есть варианты?)
09:57:06 ДП
User 39182759
<SelectList start={0} end={2}>
    <SelectListItem/>
    <SelectListItem />
    <SelectListItem/>
</SelectList>

SelectList::render(){
...
{props.children.map((c,i) => React.cloneElement(c, {index: i, isSelected: i==this.state.selected}))}
...
}
10:09:39 ДП
User 152745946
неа, я хочу внутри произвольную верстку
10:09:47 ДП
User 152745946
разделители, футер, например
10:13:02 ДП
User 39182759
<SelectList start={0} end={2}>
    <div>
    <SelectListItem isSelected={this.state.selectedId==1} onClick={e=>this.setState({selectedId: 1})}/>
    <SelectListItem isSelected={this.state.selectedId==2} onClick={e=>this.setState({selectedId: 2})}/>
   </div>
</SelectList>
10:13:57 ДП
User 39182759
и стало быть юзаешь компонент-враппер со стейтом:)
10:14:18 ДП
User 152745946
а это уже слишком явно :(
10:14:30 ДП
User 185980313
можно биндить тогда функцию и подставлять первый аргумент )
10:40:58 ДП
User 55678326
не вижу ничего криминального в связывании компонента с дочерними элементами через контекст
10:41:25 ДП
User 55678326
код получится явнее и прямолинейнее
10:44:40 ДП
User 152745946
API  получается чище внешнее. Но внутри наоборот запутаннее и неявнее все становится)
10:47:04 ДП
User 55678326
не соглашусь, сильно зависит от первоначального языка) в TypeScript с типизацией контекста нет проблем с тем, чтобы найти источник контекста
10:49:42 ДП
User 152745946
а тут дело не в источнике. У тебя контекст - это key-value, то есть вполне возможен конфликт, даже с типизацией
10:50:17 ДП
User 39182759
тесты писать зато на компоненты с моим подходом идеально просто
10:51:19 ДП
User 39182759
ну и вообще SelectListItem'ы могут быть pure functions
10:57:22 ДП
User 23384802
Ребят, никто не видел годный бойлерплейт с mobx, где есть серверный рендеринг?
10:58:01 ДП
User 88403602
у него только один минус - он стал популярен не так давно и нет норм бойлерплейтов с серверным рендерингом и прочими плюшками (только самому писать).
10:58:01 ДП
User 88403602
mobx намного проще redux'а
10:58:24 ДП
User 23384802
да) Но я подумал, пришло время спросить в конфе :D
11:05:29 ДП
User 309556
MobX не нужен когда есть rx  и most
11:22:35 ДП
User 164696606
User 23384802
mobx намного проще redux'а
Да, Дэн Абрамов говорил, что mobx фреймворк для тех кто не осилил redux
11:22:54 ДП
User 185980313
User 164696606
Да, Дэн Абрамов говорил, что mobx фреймворк для тех кто не осилил redux
он не так говорил )
11:23:03 ДП
User 164696606
Он это имел ввиду