я советовал css-in-js

но никак не ?

я выбрал jss

самый простой вариант

styled-components добавляет лишние абстракции

хз зачем они

плюс мешает нормальной работе со стилями

const styles = { button: merge(basic, { /*…*/ }) }

styled-components добавляет лишние абстракции

никаких лишних абстракций

/*…*/ норм смайл

компоненты вместо просто стилей

плюс мешает нормальной работе со стилями

у тех кто принял css-in-js другое понятие "нормальной работы со стилями" Превращать стили в JS-объект это треш

ну это debatable

@iamstarkov, что почитать чтобы проникнуться styled components? readme на гитхабе какое-то неубедительное

короче не советую styled-components

компоненты вместо просто стилей

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

если смотришь на css-in-js, то смотри на jss

у тех кто принял css-in-js другое понятие "нормальной работы со стилями" Превращать стили в JS-объект это треш

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

да дело не только в этом. Когда писал на JSS чувствовал как у меня искривляются пальцы Жесть как неудобно... везде ставишь эти кавычки строк, запятую не забыть. Привыкаешь конечно, но пальцы как будто дверью придавило

ну хз

обычный джс

срач про вкусовщину - не круто

срач про вкусовщину - не круто

жиза

ограничение возможности работы css-in-js решением (styled-components) как с обычным джс (merge) это не вкусовщина

да хрен знает Меня напрягает везде прокидывать className и прочее мержить стили для того, чтобы изменить что-либо в стилях либо добавлять классы дополнительные, вроде с обычным css уже прошли это Тут приходит абстракция, которая дает тебе каждый компонент как самостоятельную единицу и инкапсулирует стили(view) внутри себя, все начинают говорить что лишнее

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

сорри что вторгаюсь в увлекательную беседу, но у меня сломался мозг. Хэлп: есть список постов <PostListNav/> с ссылками <Link /> на детальные страницы постов <Post/>. При переходе по ссылке отрабатывает react-router v3, подгружая содержимое поста в блок на той же странице. <Route path="post" component={PostListNav}> <Route path=":id" component={Post}/> </Route> Проблема в том, при таком подходе, посты подгружаемые по клику на /post/1, /post/2 etc - не 2 копии одного компонента, а один компонент с разным содержимым. Т.е. инфа передаваемая через пропсы уникальная для каждого поста, а вот state один. В итоге, если изменить state поста на /post/1, он автоматически меняется и для /post/2. Что я делаю не так?

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

А как css оптимизировать?

А как css оптимизировать?

зачем?

А как css оптимизировать?

и что ты имеешь ввиду под оптимизацией

сорри что вторгаюсь в увлекательную беседу, но у меня сломался мозг. Хэлп: есть список постов <PostListNav/> с ссылками <Link /> на детальные страницы постов <Post/>. При переходе по ссылке отрабатывает react-router v3, подгружая содержимое поста в блок на той же странице. <Route path="post" component={PostListNav}> <Route path=":id" component={Post}/> </Route> Проблема в том, при таком подходе, посты подгружаемые по клику на /post/1, /post/2 etc - не 2 копии одного компонента, а один компонент с разным содержимым. Т.е. инфа передаваемая через пропсы уникальная для каждого поста, а вот state один. В итоге, если изменить state поста на /post/1, он автоматически меняется и для /post/2. Что я делаю не так?

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

@brs_mdrk в постах есть кнопка лайк. Кол-во лайков считаю через state. Если кликнули по посту +1.

в итоге кликаю по одному посту, все остальные тоже становятся активными

сорри что вторгаюсь в увлекательную беседу, но у меня сломался мозг. Хэлп: есть список постов <PostListNav/> с ссылками <Link /> на детальные страницы постов <Post/>. При переходе по ссылке отрабатывает react-router v3, подгружая содержимое поста в блок на той же странице. <Route path="post" component={PostListNav}> <Route path=":id" component={Post}/> </Route> Проблема в том, при таком подходе, посты подгружаемые по клику на /post/1, /post/2 etc - не 2 копии одного компонента, а один компонент с разным содержимым. Т.е. инфа передаваемая через пропсы уникальная для каждого поста, а вот state один. В итоге, если изменить state поста на /post/1, он автоматически меняется и для /post/2. Что я делаю не так?

Ну не используй стейт или проверяй ид на операции. Или willreceiveprops

Ну там убрать дублирующие свойства скомпоновать это в короткий css файл

Это все таки статическая операция на билде

при этом я просто вывела на тестовой странице все посты (просто через map) и все работает без проблем, так как каждый пост независимая копия компонента Post

Ну там убрать дублирующие свойства скомпоновать это в короткий css файл

в styled-components и css-in-js нет файлов и нет билда, всё делается в рантайме повторяющихся свойств и так не будет

@brs_mdrk в постах есть кнопка лайк. Кол-во лайков считаю через state. Если кликнули по посту +1.

держи в стейте все открытые посты

у активного { active: true }

я выбрал jss

https://github.com/cssinjs/jss/issues/356#issuecomment-279438410 следишь за этой темой?

по лайку добавляй лайк в активный пост

например

https://github.com/cssinjs/jss/issues/356#issuecomment-279438410 следишь за этой темой?

да

Я обычно делаю что на операции id и дальше проверку ид на редусере.

по лайку добавляй лайк в активный пост

Дак у нее компонент пост это хранит, и он не меняется

Это все таки статическая операция на билде

нет compilation step, всё в runtime

при этом я просто вывела на тестовой странице все посты (просто через map) и все работает без проблем, так как каждый пост независимая копия компонента Post

В стейте ключ-значение хранить И по ид поста доставать лайки и оперировать с ними

в styled-components и css-in-js нет файлов и нет билда, всё делается в рантайме повторяющихся свойств и так не будет

Ну Мб если чисто фронтенд без ssr

Я себе такого позволить не могу

Редакс в помощь?

Ну Мб если чисто фронтенд без ssr

styled-components и css-in-js работает и на сервере спокойно

styled-components и css-in-js работает и на сервере спокойно

Как и реакт(нет)

Как и реакт(нет)

че?

styled-components и css-in-js работает и на сервере спокойно

промисы и жс работают на сервере спокойно

Редакс в помощь?

Ну его типо нет как я понял

Как и реакт(нет)

хрень несешь?

Ну Мб если чисто фронтенд без ssr

у меня работает с ssr, всё норм

Как и реакт(нет)

ещё один любитель дебильного стёба?

хрень несешь?

Ну ты попробуй 1000 элементов отрендерить. Только без хамства плиз

Andrew @iamstarkov т.е. если компонент вложенный (в роутере) то state передается от одной странице другой и это норма?

:/

Ну ты попробуй 1000 элементов отрендерить. Только без хамства плиз

кеширование

У меня nextcss(postcss) на серваке

Ну ты попробуй 1000 элементов отрендерить. Только без хамства плиз

ванильно будет медленно, но будет работать

А, ну там инвайты у меня)

ERROR: S client not available

Andrew @iamstarkov т.е. если компонент вложенный (в роутере) то state передается от одной странице другой и это норма?

если у тебя спа

то всё держится в памяти

кеширование

Ну вот вопрос сколько эндпоинтов нужно дернуть в одно время чтобы у тебя умер сайт?

Ну вот вопрос сколько эндпоинтов нужно дернуть в одно время чтобы у тебя умер сайт?

вернуть эндпоинтов?

и всё, не только стейт сохраняется между страницами

что?

Andrew @iamstarkov т.е. если компонент вложенный (в роутере) то state передается от одной странице другой и это норма?

Стейт будет жить, пока не поизойдет unmount

что?

Т9 дернуть

если у тебя спа

Разве unmount стейт не убивает?

Ну вот вопрос сколько эндпоинтов нужно дернуть в одно время чтобы у тебя умер сайт?

кеширование решает много проблем

Ну в случае 1000+ элементов одна Нода молотит 3 рендера в минуту

ты как-то хреново всё настроил) без обид

да и 1000+ элементов, это достаточно хреново))

Разве unmount стейт не убивает?

Толко если анмаунт всего приложения

Мы ведь про ридакс стор

Толко если анмаунт всего приложения

?

А

Ааа

Я думал про стейт

Как минимум я

кеширование решает много проблем

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

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

НАХРЕНА 1000 рендерить сразу?!

@brs_mdrk в постах есть кнопка лайк. Кол-во лайков считаю через state. Если кликнули по посту +1.

в итоге кликаю по одному посту, все остальные тоже становятся активными

НАХРЕНА 1000 рендерить сразу?!

Нужно

Нужно

не нужно

Но мы такое переписали на канвас

Вроде как речь за стейт

стало легче и быстрее

Andrew @iamstarkov @klond90 Большое спасибо! Прояснилось теперь :) Я думала, что по умолчанию создается новый объект под каждый пост.

Регин, у тебя редакс есть?

Нужно

отрендерил первые 30-50 остальное на клиенте подтягиваешь