Всем привет, мб у кого-то была подобная проблема... На сервере генеруються данные, серед них есть две ссылки на картинки,(которые лежат на фронте в папке) но при загрузке их на страницу корректно отображается только одна, а другой не видно, только маленькая иконка, как будто ее нет, или неверная ссылка, но при перезагрузке страницы все норм, она появляеться. В чем может быть проблема, может вебпак криво собирает ?

Всем привет, мб у кого-то была подобная проблема... На сервере генеруються данные, серед них есть две ссылки на картинки,(которые лежат на фронте в папке) но при загрузке их на страницу корректно отображается только одна, а другой не видно, только маленькая иконка, как будто ее нет, или неверная ссылка, но при перезагрузке страницы все норм, она появляеться. В чем может быть проблема, может вебпак криво собирает ?

возможно с путями что-то не так

есть пример?

Ребят, в общем, еще один прикол с webpack 3. Он в этот раз кинул либу, которая используется в 6.js и 7.js в 0.js, который подгружает 1, 2, 3, 4 выборочно. Таким образом при загрузке 6 или 7 подгружается и 0, хотя либа должна быть в main.js

ну хоть путь какой у картинки покажи

в разметке

/[+]7[(][0-9]{3,3}[)][0-9]{7,7} как более правильно в регулярке описать то что в {}

Самое веселое, что он туда закинул еще 3 либы из main.js

которые вообще глубокие зависимости других зависимостей

Ребят, в общем, еще один прикол с webpack 3. Он в этот раз кинул либу, которая используется в 6.js и 7.js в 0.js, который подгружает 1, 2, 3, 4 выборочно. Таким образом при загрузке 6 или 7 подгружается и 0, хотя либа должна быть в main.js

Это же настраивается в commonchunkplugin

publicPath какой у тебя?

Это же настраивается в commonchunkplugin

Ну то есть ты хочешь сказать, что это нормальное поведение рандомно разбрасывать либы?)

слеш допиши короче перед images

Ну то есть ты хочешь сказать, что это нормальное поведение рандомно разбрасывать либы?)

Он не рандомно разбрасывает

publicPath какой у тебя?

var path = require('path'); require("babel-polyfill"); module.exports = { entry: ["babel-polyfill",'./src/client.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public') }, watch: true, module:{ loaders: [ { test:/\.js$/, exclude:/node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015','stage-1'] } } ] } }

если у тебя дефолтный

мой кфг

Ну то есть ты хочешь сказать, что это нормальное поведение рандомно разбрасывать либы?)

Есть включена опция async, то из всех чанков общие модули он вынесит в один общий чанк с номером 0

var path = require('path'); require("babel-polyfill"); module.exports = { entry: ["babel-polyfill",'./src/client.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public') }, watch: true, module:{ loaders: [ { test:/\.js$/, exclude:/node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015','stage-1'] } } ] } }

слеш допиши

слева

Есть включена опция async, то из всех чанков общие модули он вынесит в один общий чанк с номером 0

Он общие модули выносит в main.js, 0.js это подключаемый чанк, в нем логика страницы, если что)

var path = require('/path'); так ?

var path = require('/path'); так ?

const path = require(‘path’)

Он общие модули выносит в main.js, 0.js это подключаемый чанк, в нем логика страницы, если что)

Не может быть. И вообще имя задать нельзя если хочешь чтоб из асинхронных он выносил

Не может быть. И вообще имя задать нельзя если хочешь чтоб из асинхронных он выносил

Можно, через комментарий

лол, тут такая каша

Он общие модули выносит в main.js, 0.js это подключаемый чанк, в нем логика страницы, если что)

Покажи скриншоты bundelanalyzer

var path = require('path'); require("babel-polyfill"); module.exports = { entry: ["babel-polyfill",'./src/client.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public') }, watch: true, module:{ loaders: [ { test:/\.js$/, exclude:/node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015','stage-1'] } } ] } }

очевидно что слеш нужен в output.path

Можно, через комментарий

Если у тебя один импорт через который всё роутится, то нельзя

var path = require('/path'); так ?

'/images/zaloopa'

очевидно что слеш нужен в output.path

понятно, спс)

Ребят, посоветуйте пож-та как внутри нативного addEventListener(document, 'click', {...}) проверить getBoundingClientRect'ом на элементе ли я кликнул или на пустой области экрана? Это нужно, чтобы закрывать элемент по клику в пустой области.

Он не рандомно разбрасывает

Да, согласен, это поведение аттрибута deepChildren: true у чанков и ModuleConcatenationPlugin вместе. Лютая смесь. Одно из лучше выкинуть

Да ну?

понятно, спс)

ну че там?

ну че там?

щас поправлю, посмотрю, и отпишу, а то тут каша)

у тебя картинка не грузится, вангую что из-за роутинга на клиенте

Ребят, посоветуйте пож-та как внутри нативного addEventListener(document, 'click', {...}) проверить getBoundingClientRect'ом на элементе ли я кликнул или на пустой области экрана? Это нужно, чтобы закрывать элемент по клику в пустой области.

обычно откатывают всплывание события в той области, клик в которой не должен закрывать элемент

ну или определяй по target события - но там несколько геморная логика с обходом parentNode

Ребят, посоветуйте пож-та как внутри нативного addEventListener(document, 'click', {...}) проверить getBoundingClientRect'ом на элементе ли я кликнул или на пустой области экрана? Это нужно, чтобы закрывать элемент по клику в пустой области.

react click outside пакет

Уважаемые, кто подскажет - есть чат по MobX?

обычно откатывают всплывание события в той области, клик в которой не должен закрывать элемент

а это как? я правильно мыслю? 1. Навестить addEventListner 'click' на window.document 2. По клику проверить методом getBoundingCliectRect - дошло ли событие до нужно области. 3. Если дошло - сделать evemt.stopImmediateProppogation() 4. Снять обработчик внутри componentWillUnmount()

а это как? я правильно мыслю? 1. Навестить addEventListner 'click' на window.document 2. По клику проверить методом getBoundingCliectRect - дошло ли событие до нужно области. 3. Если дошло - сделать evemt.stopImmediateProppogation() 4. Снять обработчик внутри componentWillUnmount()

1. в самом компоненте на основной тег вешаем обработчик который делает так: event.stopPropagation() - вроде оно, если что меня сейчас поправят (нет проекта под рукой) 2. когда монтируется компонент (componentDidMount) - добавляем addeventlistener на document 3. когда скрываем компонент (componentWillUnmount) - удалем обработчик с document (!важно!)

а это как? я правильно мыслю? 1. Навестить addEventListner 'click' на window.document 2. По клику проверить методом getBoundingCliectRect - дошло ли событие до нужно области. 3. Если дошло - сделать evemt.stopImmediateProppogation() 4. Снять обработчик внутри componentWillUnmount()

забудь про getBoundingCliectRect - эта логика уже написана и не нами (не боги горшки обжигают - но тут придумать лучше тяжко и не надо)

забудь про getBoundingCliectRect - эта логика уже написана и не нами (не боги горшки обжигают - но тут придумать лучше тяжко и не надо)

Эм...

Эм...

ну логика простая - если событие всплыло до document - значит его никто не остановил, а наша область останавливает всплывание события

ну логика простая - если событие всплыло до document - значит его никто не остановил, а наша область останавливает всплывание события

Понял. В контекст не особо врубился.

Понял. В контекст не особо врубился.

https://javascript.info/bubbling-and-capturing - немного про события в dom https://reactjs.org/docs/events.html - про события в react Если я правильно понимаю с чем у тебя затык должно помочь)

https://javascript.info/bubbling-and-capturing - немного про события в dom https://reactjs.org/docs/events.html - про события в react Если я правильно понимаю с чем у тебя затык должно помочь)

Я допёр уже, спасибо. Когда задавал вопрос, то не особо контекст беседы понял)

https://reactrocket.com/post/turn-your-hocs-into-render-prop-components/

Кто-то пробовал?

Выглядит охуенно

Не вижу подводных камней вообще

пробовал recompose в таком стиле?

представил себе <WithStateHandlers render={() => <WithDisplayName render={...} />} />

может пойти array.map переделать? <Each list={array}> {(item) => <Item item={item} />} </Each>

может пойти array.map переделать? <Each list={array}> {(item) => <Item item={item} />} </Each>

Ахахахаха

ERROR: S client not available

<If condition={true}> {() => <Hello />} {() => <World />} </If>

С типизацией не паришься?

С типизацией не паришься?

это код из статьи)

Понял.

1. в самом компоненте на основной тег вешаем обработчик который делает так: event.stopPropagation() - вроде оно, если что меня сейчас поправят (нет проекта под рукой) 2. когда монтируется компонент (componentDidMount) - добавляем addeventlistener на document 3. когда скрываем компонент (componentWillUnmount) - удалем обработчик с document (!важно!)

спасибо!

спасибо!

если помогло - рад)

<If condition={true}> {() => <Hello />} {() => <World />} </If>

А говорят, нет if-else для реакта

может пойти array.map переделать? <Each list={array}> {(item) => <Item item={item} />} </Each>

ухх

реактеры же плюются на такое

ребят кто может помочь решить проблему с версткой. Какое-то не очевидно поведение

ребят кто может помочь решить проблему с версткой. Какое-то не очевидно поведение

@css_ru

окей сори

Пробую formik, возник вопрос по производительности. Ведь даже без привязки к redux хранилищу, каждое изменение в любом поле формы, вызывает ререндер всех остальных полей. Библиотека оставляет эту проблему для юзеров?

Пробую formik, возник вопрос по производительности. Ведь даже без привязки к redux хранилищу, каждое изменение в любом поле формы, вызывает ререндер всех остальных полей. Библиотека оставляет эту проблему для юзеров?

Есть же final form

API formik гораздо приятнее для понимания, поэтому тестирую ее вместо react-redux-form

Пробую formik, возник вопрос по производительности. Ведь даже без привязки к redux хранилищу, каждое изменение в любом поле формы, вызывает ререндер всех остальных полей. Библиотека оставляет эту проблему для юзеров?

Библиотека оставляет эту проблему. Точка. И это ужасно

Библиотека оставляет эту проблему. Точка. И это ужасно

забавно, получается что мои формы на react-redux-form, с debounced записью новых значений в хранилище, работают значительно быстрее ?

Начинаю разбиратся в реакте, есть проект, тут тайпскрипт и редакс. Мне говорят нужно определить defaultProps внутри компонента, а не определять их у родительского контейнера и потом прокидывать внутрь дочернего. но тут возникает вопрос - как после применения defaultProps равильно обновить состояние у родителя?(ps. я гуглил, честно. pss. ясно что можно повесить componentWillUpdate и кинуть родителю обновление пропсов, но выглядит это крипово).

забавно, получается что мои формы на react-redux-form, с debounced записью новых значений в хранилище, работают значительно быстрее ?

Так и есть. Когда начинают хейтить редакс-форм - обычно только 1 аргумент (не считая сложного АПИ), что не надо тащить данные формы в стор. Может оно и правда, но стор все-равно нужен, хоть и локальный. А ради этого - не хочется форкать либу

Так и есть. Когда начинают хейтить редакс-форм - обычно только 1 аргумент (не считая сложного АПИ), что не надо тащить данные формы в стор. Может оно и правда, но стор все-равно нужен, хоть и локальный. А ради этого - не хочется форкать либу

сложный АПИ это тоже важный аргумент, уйти с rrf решил, когда понял что при изменении даже самых низкоуровневых компонентов, сильно подстраиваюсь под конкретную либу

но кажется это не имеет смысла) надо rrf render props добавить и расслабиться

Кто юзает toastr? Как его использовать с редаксом? Я хочу диспатчить экшон с инфой для сообщения

А в каком проценте случаев лишний ререндер формы вообще хоть как то влияет на производительность?

А в каком проценте случаев лишний ререндер формы вообще хоть как то влияет на производительность?

Очевидно, что в 100% случаях влияет

Вопрос только в том, как скоро это станет проблемой

Очевидно, что в 100% случаях влияет

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