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

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

зачем сетить стейт тогда?

зачем сетить стейт тогда?

Мне надо получать текущее время и если оно прошло определенную отметку, то выполнится функция. Например у меня запланировано действие на 19:50, если наступило 19:50, то покажется модальное окно

Я другое решение не придумал, чем сетить каждую секунду

Я другое решение не придумал, чем сетить каждую секунду

так лучше сетить флаг по условию

Не понял

ты прямо в рендере проверяешь выполнение условия для времени?

componentDidMount() { this.timer = setInterval(this.checkCurrentTime, 1000) } shouldComponentUpdate(props, state) { if (state.currentTime !== this.state.currentTime) { this.updateStatus(this.state.currentTime) return false } return true } componentWillUnmount() { clearInterval(this.timer) }

Это нормально, что я в sCU функцию вызвал?

checkCurrentTime = () => { this.setState({ currentTime: new Date(), }) }

Это нормально, что я в sCU функцию вызвал?

Ты делаешь принципиально неправильно, надо вызывать setState когда прошло нужное тебе время

А как получать текущее время?

А как получать текущее время?

Текущее системы или текущее компонента?

Текущее системы. Кейс такой. Есть действие которое должно выполниться в 21:00 например, если я в 20:00 ушел от компа, а в 21:00 подошел, то у меня должна модалка открыться

Текущее системы. Кейс такой. Есть действие которое должно выполниться в 21:00 например, если я в 20:00 ушел от компа, а в 21:00 подошел, то у меня должна модалка открыться

В componentDidMount проверять?

он один раз вызывается

Текущее системы. Кейс такой. Есть действие которое должно выполниться в 21:00 например, если я в 20:00 ушел от компа, а в 21:00 подошел, то у меня должна модалка открыться

Тоесть если в приложении не было действий час ты должен что то сделать?

Кароч типа крона на бэкэнде. Выполнение события в определенное время

он один раз вызывается

Так и стейт компонента один раз сетится

Стейт в интервале каждую секунду сетится

тем самым я в стейте всегда вижу текущее время

Кароч типа крона на бэкэнде. Выполнение события в определенное время

а если сразу вычеслить кол-во секунд до даты и сделать сет таймаут? или в интервале проверять наступила ли дата ( без изменения стейта)

Это сильно сложнее. Я решил задачу, но не знаю корректно ли, ререндеров лишних нет

Сейчас гист скину

https://gist.github.com/shashkovdanil/b00759a34457aa88d35f2679c039e382

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

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

а почему не сделать все в checkCurrentTime ?

ребят, а прокидывание пропсов из родителя в компоненты уровнем ниже влечет потерю производительности? ну то есть я могу: 1) в одном большом компоненте получить все нужные данные и сразу их отрисовать 2) в одном компоненте-родителе получить все нужные данные и прокинуть их в несколько компонентов-чайлдов, где уже отрисовать 3) получить и отрисовать данные в компонентах-чайлдах. а в компоненте-родителе только скопмпоновать чайлды как лучше сделать?

а почему не сделать все в checkCurrentTime ?

В коллбэке сетстейта?

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

У тебя срабатывает сайд эффект от изменений стейта, это делают в componentDidUpdate а не sCU

давно задаюсь этим вопросом, если честно, но ток щас решил спросить

а почему не сделать все в checkCurrentTime ?

проверять наступило ли 21:00 и диспатчит экшн

ребят, а прокидывание пропсов из родителя в компоненты уровнем ниже влечет потерю производительности? ну то есть я могу: 1) в одном большом компоненте получить все нужные данные и сразу их отрисовать 2) в одном компоненте-родителе получить все нужные данные и прокинуть их в несколько компонентов-чайлдов, где уже отрисовать 3) получить и отрисовать данные в компонентах-чайлдах. а в компоненте-родителе только скопмпоновать чайлды как лучше сделать?

Лучше дробить на минимальные компоненты и им прокидывать что нужно. На производительность это не влияет, так удобнее поддерживать

Коллеги, простите, пож-ста. Нужна либа для того, чтобы я мог написать несколько правил CSS (в духе styled, но без селектора) в templated function типа: const style = css` background-color: #123456; `; и чтобы затем этот style можно прямиком в проп style элемента вставлять. Возможно, я что-то не учитываю, но ничего более вразумительного, чем css2obj я не нагуглил.

Лучше дробить на минимальные компоненты и им прокидывать что нужно. На производительность это не влияет, так удобнее поддерживать

понятно, спасибо а что тогда влияет на производительность?

Воу https://reactarmory.com/answers/how-can-i-use-css-in-js-securely

А где запись? https://pitercss.ru/16/pres/css-in-js/

господа, подскажите пожалуйста, каким образом лучше всего внедрить прелоад компонент для списка (аналог слака, фейсбука, когда при первой загрузке видишь пустые поля)? данные сейчас берутся из redux-store, в нем есть entites и флаг isFetching, обновляются экшенами, которые в свою очередь отправляют запросы в бэк. попробовал react-loadable, но судя по всему это не про мой случай (его вешают на промис, либо создают фейк делей, на время обновления стейта) планирую сделать руками подстановку нужного компонента по обновлению redux store, но встают вопросы, где лучше проверять флаг (внутри компонента или вне) и куда в таком случае закидывать initial экшены, которые подгружают контент на старте апки (сейчас componenDidMount вызывает экшен на подругрузку данных в себя) спасибо )

А есть хорошие подсветки синтаксиса для postcss?

Как лучше вызывать коллбэк после успешного реквеста, который выполнен через thunk (componentWillReceiveProps не хочу юзать) Кейс такой: открылась модалка с текстареа, веели текст, нажали сохранить, ушел запрос, пришел 200 ответ, далее надо закрыть модалку

Как лучше вызывать коллбэк после успешного реквеста, который выполнен через thunk (componentWillReceiveProps не хочу юзать) Кейс такой: открылась модалка с текстареа, веели текст, нажали сохранить, ушел запрос, пришел 200 ответ, далее надо закрыть модалку

в санке возвращай промис, потом await или then

?

?

ноооо лучше стейт модалки тоже хранить в редуксе и диспатчить закрытие в самом санке

А есть хорошие подсветки синтаксиса для postcss?

Щито?

А есть хорошие подсветки синтаксиса для postcss?

Для чего именно?

Для чего именно?

Для vscode. После sass кажется что половина кода не подсвечивается, хотя подключил postcss-syntax и нормально его настроил

Для vscode. После sass кажется что половина кода не подсвечивается, хотя подключил postcss-syntax и нормально его настроил

Никогда такой проблемы не было. Ведь это просто sass

Привет, у меня есть приложение. С browserrouter, которое лежит на сервере в папке api1/ <BrowserRouter basename={'api1'}> <Switch> <Route path="/api/:api_name/:method_name" component={(props) => <Method {...props} />}/> </Switch> </BrowserRouter>,Собственно это просмотрщик api. Для родственного api, форка первого, я скопировал приложение, тоже форкнул, поправиль кое чего в исходниках и положил в папку "api2". Проблема сейчас в том, что навигация не работает толком. Не пойму из-за чего. Либо работает api1 либо api2. Если почистить все в localstorage и куки, то начинает работать другое api. Видимо BrowserRouter использует одно и тоже histrory, сайт то один. Но не пойму, как с этим бороться.

То есть подсветка для sass нужна. А вообще @vscode_ru

То есть подсветка для sass нужна. А вообще @vscode_ru

Нее... я перешёл с sass на postcss. И после sass, каежтся что у postcss подстветка синтаксиса хуже.

здоров типы

подскажите компонент есть ли такой подобный для кнопки

Привет, у меня есть приложение. С browserrouter, которое лежит на сервере в папке api1/ <BrowserRouter basename={'api1'}> <Switch> <Route path="/api/:api_name/:method_name" component={(props) => <Method {...props} />}/> </Switch> </BrowserRouter>,Собственно это просмотрщик api. Для родственного api, форка первого, я скопировал приложение, тоже форкнул, поправиль кое чего в исходниках и положил в папку "api2". Проблема сейчас в том, что навигация не работает толком. Не пойму из-за чего. Либо работает api1 либо api2. Если почистить все в localstorage и куки, то начинает работать другое api. Видимо BrowserRouter использует одно и тоже histrory, сайт то один. Но не пойму, как с этим бороться.

Сам себе и ответил. Создал history, с указанием basename и вроде бы заработало

типа свич-кнопка

типа свич-кнопка

ну гугл react toggle / switch button, там их точно много. другое дело что навряд ли это нужно брать готовым

как называтся подгрузка элементов только при появлении в активной области скрола? но это не пагинация, так как полоса прокрутки неподгруженные элементы "видит", то есть они уже есть

ERROR: S client not available

Виртуализация

как называтся подгрузка элементов только при появлении в активной области скрола? но это не пагинация, так как полоса прокрутки неподгруженные элементы "видит", то есть они уже есть

Lazy loading?

Есть кстати доя реакта что-нибудь, для автоматизации этой фигни?

Lazy loading?

Не, при лейзи лоадинге неподгруженных элементов нет

Не, при лейзи лоадинге неподгруженных элементов нет

Не понял

Не, при лейзи лоадинге неподгруженных элементов нет

Все есть

Есть кстати доя реакта что-нибудь, для автоматизации этой фигни?

https://github.com/bvaughn/react-virtualized

https://github.com/bvaughn/react-virtualized

В итоге, конечное решение выглядит примерно так: 1. Описываем контейнер элементов. Контейнер внешне должен быть ограниченной высоты и ширины. 2. Подписываемся на события скроллинга внутри контейнера и пересчитываем видимые элементы. 3. Вместо невидимых элементов мы можем отрисовать пустое пространство. К примеру, через свойства margin/padding. Ни в коем случае не делайте через создание блока и изменение его размеров, иначе косяков не оберетесь. 4. Отрисовываем видимые элементы. эта близко к правде или уже сильно устарело?

https://github.com/bvaughn/react-virtualized

Устарел уже, вроде?

Не помню...

ну вот тут все подробно описано, я для своих целей виртуализацию могу спокойно сам написать. другое дело, что непонятно, насколько актуально написанное тут https://medium.com/@viktorlove/ui-virtualization-9eeaab896913

Все есть

Нет, нету. Лейзи лоадинг это когда у тебя 1000 элементов списка, а ты показываешь только 20 и подгружаешь по мере необходимости. Как бесконечный скролл в твиттере. А виртуализация это именно что отображение только тех элементов, что видны в данный момент на экране, при том подгружать данные для них ты можешь когда тебе это будет удобно

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

Нет, нету. Лейзи лоадинг это когда у тебя 1000 элементов списка, а ты показываешь только 20 и подгружаешь по мере необходимости. Как бесконечный скролл в твиттере. А виртуализация это именно что отображение только тех элементов, что видны в данный момент на экране, при том подгружать данные для них ты можешь когда тебе это будет удобно

Просто видимо я неправильно это называл?

Щитопделать

ребят, а я правильно понимаю, что в идеально оптимищированном приложении sCU должен быть в каждом компоненте?

и получается, что в статических компонентах, которые не зависят от данных, я просто пишу в sCU false или я хуйню несу?

Я не знаю, что такое sCU

pure components

А

Я не знаю, что такое sCU

лайфсайкл метод shouldComponentUpdate

я просто про оптимизацию вроде начитался, но на практике чет хз что она за зверь

Хз нужно ли оно вообще

ребят, а я правильно понимаю, что в идеально оптимищированном приложении sCU должен быть в каждом компоненте?

Нет конечно

Нет конечно

только в компонентах айтема списка?

только в компонентах айтема списка?

А ты их часто ререндеришь чтоли?

А ты их часто ререндеришь чтоли?

нет, да и элементов немного я теоретизирую

#пятничная_задачка Что будет в каждом из случаев? http://s.csssr.ru/U8SMMLH99/20181019201737.png