Привет. Подскажите каким образом тут появляются иконки при ховере, если это нигде не прописано https://codesandbox.io/s/3tkvm ?
Внутри Upload
Alexey
Den
Привет. Подскажите каким образом тут появляются иконки при ховере, если это нигде не прописано https://codesandbox.io/s/3tkvm ?
Похоже, это фича библиотеки для кнопок для которых переданы пропсы
onPreview={}
onChange={}
🦜
showUploadList={{showPreviewIcon: false}}
Andrew
Ruslan
Самому проще, а если надо быстро, можно и подключить
Solnur
ну если чисто для модалок тянуть материал….. может проще самому сделать
ну если только одну модалку, то лучше сам
Алексей
Ребят, пробую reselect и встала сразу проблема: работает polling данных. Почти каждый раз прилетают одни и те же данные - происходит rerender компонента, использующий эти данных. Пытаюсь закешировать эти данные с помощью селектора - не получается - rerender все равно происходит. Что не так в этом коде?
function getAllTickets(reducer) {
return reducer.get('tickets');
}
export const allTicketsSelector = createSelector([getAllTickets], items => items);
🦜
Какую либу обычно юзают для модалок? Есть что-то модное и общепринятое?
поищи по чату, я тут скидывал модалки доступные
🤴👷♂️🦸♂️🧚♀️
а тебе что надо?
при ховере на родителя чтоб иконки вспылвали. у меня стейта нет, только если укажу его, то кнопки появятся
🦜
при ховере на родителя чтоб иконки вспылвали. у меня стейта нет, только если укажу его, то кнопки появятся
ну значит надо подстроиться под компонент
🤴👷♂️🦸♂️🧚♀️
ну значит надо подстроиться под компонент
а может лучше при ховере на родителя цссом отображать кнопку?
Dmytro
Ребят, пробую reselect и встала сразу проблема: работает polling данных. Почти каждый раз прилетают одни и те же данные - происходит rerender компонента, использующий эти данных. Пытаюсь закешировать эти данные с помощью селектора - не получается - rerender все равно происходит. Что не так в этом коде?
function getAllTickets(reducer) {
return reducer.get('tickets');
}
export const allTicketsSelector = createSelector([getAllTickets], items => items);
я не уверен, но каждый раз при обновлении данных в редюсер записывается новый массив, хоть и данные те же самые. Соответственно ссылки разные, поэтому реселект тут не работает
Vladimir
Кто нибудь юзает preact?
Vladimir
Как вы настриваете свою IDE под него?
Например Webstorm
Mikhail
я юзаю, так же как реакт
Mikhail
никак не настраваю ide
Vladimir
а проблемы с jsx, class, className
Vladimir
Vladimir
Вот это например
Cenator 🐈
Алексей
кто-нибудь сталкивался с проблемой в react-router-dom когда по роуту идёшь потом перегружаешь страницу и выкидывает 404 причем что редиректа нету
Cenator 🐈
Юзай реакт в деве, преакт компат в проде
Это поможет так же выявить ошибки связанные с самим преактом
Vladimir
Изъеб, но спасибо
Vladimir
Юзай реакт в деве, преакт компат в проде
Vladimir
Возможно стоит задуматься об отказе преакта
Cenator 🐈
Да
Mikhail
Возможно стоит задуматься об отказе преакта
пока реакт такой жирный, я лучше буду юзать преакт
Vladimir
Ну страдать, ради экономии в 30-40кб так себе
Илья
пока реакт такой жирный, я лучше буду юзать преакт
Ваша способность найти жирность даже в пачке обезжиренного творога, давно и хорошо всем известна – поэтому можете даже не начинать.
Tor
Где вы находите ту грань, между удобным DX и размером бандла?
Пишите на ваниле, там нет ненужного реакта, если уходить в крайности.
Mikhail
Ваша способность найти жирность даже в пачке обезжиренного творога, давно и хорошо всем известна – поэтому можете даже не начинать.
ну серьезно, 110кб для вас - ничто?
Виктор
а преакт разве не отваливается у юзеров на компах?
Дима
Ваша способность найти жирность даже в пачке обезжиренного творога, давно и хорошо всем известна – поэтому можете даже не начинать.
нифигасе, а с какой стати должны терпеть юзеры потому что ленивому разрабу не до оптимизации размера
Titov
ну его, он стремный
Вопрос по поводу использование middleware с роутером и firebase:
Есть firebase который получает авторизированного пользователя.
У меня есть роуты в отдельным файлом.
И этот список роутов рендерится в навбаре, каким образом прикрутить middleware к этим роутам? спасибо.
Vladimir
Hello world - от преакта - 10кб - gzip
Hello world от реакта - 35кб gzip
Vladimir
10кб против 110кб, и никаких страданий
Alexey
Ребят, пробую reselect и встала сразу проблема: работает polling данных. Почти каждый раз прилетают одни и те же данные - происходит rerender компонента, использующий эти данных. Пытаюсь закешировать эти данные с помощью селектора - не получается - rerender все равно происходит. Что не так в этом коде?
function getAllTickets(reducer) {
return reducer.get('tickets');
}
export const allTicketsSelector = createSelector([getAllTickets], items => items);
в реселекте === сравнение.
тебе нужно свой selectorcreator создать и передать функцию сравнения свою (lodash.isequal например)
Default
Пока стрёмный
Там есть достаточно много объективных проблем и Рич прекрасно о них знает, просто даже третья версия Svelte это один гигантский todo
Default
Хотя мне, как ни странно, пока что не хватает только нормальной поддержки TS/Flow
Mikhail
Hello world - от преакта - 10кб - gzip
Hello world от реакта - 35кб gzip
преакт в gz - 3.5кб, и сравнивать все-таки стоит несжатый js, это тот объем кода, который браузер будет парсить при каждом обновлении страницы
Alexey
в реселекте === сравнение.
тебе нужно свой selectorcreator создать и передать функцию сравнения свою (lodash.isequal например)
Разве дешевле выйдет вместо проверки в VirtualDOM проверять каждый раз массив?
Solnur
Оптимизация это правильно! Но стоит ли сравнивать (да да 100кб js не равен 100кб картинке, но опять же что там в этом 100кб js) если норм либа то почему бы и нет? если, мгновениями позже мы загрузим 1000мб+ медиа и на этом фоне вся наша дрочка с размерами js теряет смысл
i
всем привет, хочу уточнить правильно ли понял. React.PureComponent от обычного отличается тем, что там меньшеисполняемого рендер кода внутри и его стоит юзать когда надо чтоб компонент просто выводил хтмл с инфой - когда внутри компеонента нет других компонентов
Alexey
Разве дешевле выйдет вместо проверки в VirtualDOM проверять каждый раз массив?
а virtual dom причем?
reselect - мемоизированные селекторы
Реакт перерисовывает компонент каждый раз, как в сторе поменялось что-то. А т.к. redux иммутабельный - любое изменение - новый объект store - перерисовка компонентов. Чтобы этого не происходило - селекторы должен проверять не ===, а deep equal своего "кусочка" стора. В принципе то же самое можно делать в shouldcomponentupdate.
Да, думаю проверить пару объектов дешевле, чем преобразовать их в dom tree.
i
или его стоит юзать в принципе для вывода статики, то бишь если компонент предполагает пропсы и состояние, то React.PureComponent уже не юзать
Alexey
а virtual dom причем?
reselect - мемоизированные селекторы
Реакт перерисовывает компонент каждый раз, как в сторе поменялось что-то. А т.к. redux иммутабельный - любое изменение - новый объект store - перерисовка компонентов. Чтобы этого не происходило - селекторы должен проверять не ===, а deep equal своего "кусочка" стора. В принципе то же самое можно делать в shouldcomponentupdate.
Да, думаю проверить пару объектов дешевле, чем преобразовать их в dom tree.
Так о массиве разговор насколько я понял, проверять весь массив каждый раз по моему бессмысленно, пусть реакт рендер запускает а там он сам сравнит и перерисует что изменилось
Alexey
или его стоит юзать в принципе для вывода статики, то бишь если компонент предполагает пропсы и состояние, то React.PureComponent уже не юзать
React.Component - shouldComponentUpdate() { return true }
PureComponent? насколько я помню, проверяет значения
Юрий
ребят, у меня есть 2 массива в стейте, я хочу описать 2 метода, в котором каждый из массивов будет перебираться и возвращаться <li>{item}</li>
а в рендере вызвать этот метод внутри <ul></ul>
но ничего не выводиться, вопрос почему?
Alexey
Так о массиве разговор насколько я понял, проверять весь массив каждый раз по моему бессмысленно, пусть реакт рендер запускает а там он сам сравнит и перерисует что изменилось
так если массив не изменился (данные не изменились), то всё равно у нас новый объект будет
Alexey
и даже если данные те же, компонент перерисуется
i
@n3r0bi0m4n там написано, что пропускает обновление пропсов для всего поддерева компонентов
Alexey
@n3r0bi0m4n там написано, что пропускает обновление пропсов для всего поддерева компонентов
где "там"?)
у purecomponent в shouldcomponentupdate логика есть
обычный компонент просто true возвращает
https://ru.reactjs.org/docs/react-api.html#reactpurecomponent
i
http://prntscr.com/o4sui7
i
так... всё-таки чем пур отличается от обычного, не понимаю
i
про React.memo чётко написано что он для статики
i
а с PureComponent я до сих пор не понял, вроде написано что он тоже подразумевает статику, но с другой стороны можно и по пропсам менять результирующий рендер
Alexey
так... всё-таки чем пур отличается от обычного, не понимаю
Purecompoent проверил, поменялись ли данные в пропсах (не только ссылка), если нет - ничего не делает, соотв-но, child-ы тоже (если они dumb)
i
а обычный компонент разве не так работает?
Vadim
а обычный компонент разве не так работает?
React.PureComponent похож на React.Component. Отличие заключается в том, что React.Component не реализует shouldComponentUpdate(), а React.PureComponent реализует его поверхностным сравнением пропсов и состояния.
Alexey
а обычный компонент разве не так работает?
для обычного
const a = [1,2,3];
const b = [...a];
// a !== b
для pure a === b, т.к. данные те же (поверхностно)
shouldComponentUpdate() вызывается перед рендером, когда получает новые пропсы или состояние. Значение по умолчанию равно true. Этот метод не вызывается при первом рендере или когда используется forceUpdate().
Обычный ререндерится всегда, просто меняет кусочки, которые поменялись в реальном dom
i
то бишь для обычного будет перерендер даже если новые пропсы такие же как старые?
Alexey
да
i
и у should не будет обновления дочернрх компонентов?
i
то бишь внутри него предполагаются ток компоненты со статикой?
Alexey
все компоненты - динамические
компонент со статикой это
shouldcomponentupdate(nextstate, nextprops, nextcontext) { return false; } :)
Alexey
один раз нарисуется и всё)
Alexey
либо я не правильно понял вопрос
тогда извиняюсь