И в зависимости от состояний компонентов выдаешь разное отображение

Привет всем. может кто может посоветовать какую тему под webstorm для синтаксиса реакта?

Привет всем. может кто может посоветовать какую тему под webstorm для синтаксиса реакта?

@ide_ru

разное отображения - имеется в виду разные стили для одного и того же элемента?

типа селектор 1

разное отображения - имеется в виду разные стили для одного и того же элемента?

Да

стили разные

понял

Селекторов типа нет)

Есть компонент, его состояние и отображение

Привет всем. может кто может посоветовать какую тему под webstorm для синтаксиса реакта?

так вебшторм сам умеет, или я не понял вопрос?

И они связаны напрямую

оу

вижу

крутяк

ну каскадность, если хочется, тоже можно заюзать

по хорошему, под каждый стиль компонента выделяется отдельный файл?

типа const Button = styled.button``; const Wrapper = styed.div` ${Button} { color: red; } `;

но я бы не советовал

по хорошему, под каждый стиль компонента выделяется отдельный файл?

В sc стили в том же файле

и как, утопаешь в стилях?

это можно решить зачастую через просто расширение стиля const MyButtonInWrapper = styled(Button)` color: red; `;

имела ввиду подсветку синтаксиса) сменить цвета на менее ядреные

и как, утопаешь в стилях?

Если не делать больших компонентов, то всё будет ок)

по хорошему, под каждый стиль компонента выделяется отдельный файл?

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

зачем выносить Wrapper например

Лучше Darcula не придумали ничего

Понял. Спасибо за инфу, погнал я спать) Всем спокойной ночи!

Спокойной

Пока не ушёл, вопрос ещё появился. После того, как в компоненте с полями и кнопкой add произошёл submit с новым данными, нужно как то их передать в соседний компонент. Получается, их нужно сначала передать в самый старший компонент, а затем в компонент с таблицей? Т.е. source of truth будет сам app.js(враппер)?

Лучше Darcula не придумали ничего

Obsidian

Пока не ушёл, вопрос ещё появился. После того, как в компоненте с полями и кнопкой add произошёл submit с новым данными, нужно как то их передать в соседний компонент. Получается, их нужно сначала передать в самый старший компонент, а затем в компонент с таблицей? Т.е. source of truth будет сам app.js(враппер)?

Вот когда нужно передать в соседний, то стейт надо поднимать вверх. Если у тебя выше только <App>, то что делать, надо в него класть

Но часто бывает так, что компоненты как бы соседи, но каждый в своей ветке очень глубоко вложен

Тогда-то на помощь и приходит редакс

Понял. А если стейт меняется в самом app.js,то ререндер идёт от компонента, где изменился стейт и вниз по дереву? В моем случае, от app.js и вниз?

Кароче, чуваки, немного ночной оффтопик. Можно немного померяться письками В каком самом большом проекте на реакте вы участвовали? Кол-во строчек кода/Кол-во компонентов/Кол-во людей в команде/etc.

Или любое изменение стейта создаёт вирт дом всего приложение и ререндерит все приложение (его внутр части)?

Или любое изменение стейта создаёт вирт дом всего приложение и ререндерит все приложение (его внутр части)?

Не, по частям

В плане, место изменения стейта и вниз?

Да

Или любое изменение стейта создаёт вирт дом всего приложение и ререндерит все приложение (его внутр части)?

Именно, если компонент не вернет в shouldComponentUpdate -> false, то он отререндерится

Спасибо

Или любое изменение стейта создаёт вирт дом всего приложение и ререндерит все приложение (его внутр части)?

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

Скорее всего

За такие тонкости ручаться не стану

Имеешь в виду изменение стейта в любом месте приложения?

React doesn't currently take advantage of scheduling in a significant way; an update results in the entire subtree being re-rendered immediately. Overhauling React's core algorithm to take advantage of scheduling is the driving idea behind Fiber.

Ну, кажется, с 16 версии что-то могло поменяться

В общем, не парься, реакт делает как можно меньше работы :)

Оке

Вообще, если это дерево, то можно проводить обновления только там, где нужно

Раз уж это рекурсивная структура

Так что, думаю, так и происходит

Впрочем, это тонкости

Меня успокоили слова in the entire SUBTREE

Не будет проходить там где нужно) Доказано на практике, что shallowCompare не отрабатывает как нужно во многих случаях

Ага

Ну вот

Не будет проходить там где нужно) Доказано на практике, что shallowCompare не отрабатывает как нужно во многих случаях

Ну я и не про shallow compare :)

Кстати, есть смысл заменить на PureComponent все компоненты у которых нету shouldComponentUpdate?

Кстати, есть смысл заменить на PureComponent все компоненты у которых нету shouldComponentUpdate?

Он есть у всех компонентов

И там return true

:))

Понял

Окей, у каких компонентов стоит заменять?

Предположительно, у тех, которые получают в пропсы не примитивы)

ERROR: S client not available

И кстати, я не совсем про аддон shallow compare, я про дефолтное сравнение this.props !== nextProps || this.state !== nextState

Так там вроде каждую пропсу по одной сравнивают

Предположительно, у тех, которые получают в пропсы не примитивы)

Те если компонент получает только обьекты?

Те если компонент получает только обьекты?

В том числе объекты

Если примитивы получает, то в PureComponent уже всё написано

Если только их

А где именно юзать Да черт знает, где тормозит)

Да по факту у меня ничего кроме профиля не тормозит и то только потому что я его как дебил сделал одним компонентом)

Лень было разделять и никак руки не дойдут

Кстати, можно как-то спастись от блядского ререндеринга всего и вся при рендере загрузчика?

this.state.loader ? <div className="loader" /> : <div> <Component1 /> <Component2 /> <Component3 /> </div>

Если даже на пол секунды включится loader все будет ререндерится заново, даже то что не должно этого делать, если бы оно где-то сохранилось

Или только ручками сохранять?

А в чём проблема что что-то заререндерится?

Или только ручками сохранять?

а что, отдельно лоадер ваще никак не показать?

ты же прямо указываешь ему всё ререндерить

А в чём проблема что что-то заререндерится?

Ну там перформанс и все дела

Это в теории

А как на практике?

Стоит игра свеч?

Перфоманс — это системный подход, а не микрооптимизации)

А в чём проблема что что-то заререндерится?

так ведь там вся страница

Ну там кто-то кидал пример с большим списком и PureComponent

а половина из нее остается прежней, а то и более

Работало плавнее :)

так ведь там вся страница

ну так покажи лоадер в отдельном компоненте, а по пути уже решай, что обновить, что нет

так ведь там вся страница

Так по дефолту у тебя и так возвращается true почти везде

ты же реально написал ИЛИ лоадер ИЛИ страница

а половина из нее остается прежней, а то и более

Ну и хорошо

так ведь там вся страница

То есть у тебя в первую очередь медленно рендерится страница?)

а что, отдельно лоадер ваще никак не показать?

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

То есть у тебя в первую очередь медленно рендерится страница?)

ну 150-200 мс, если полная инфа о профиле то гдето 300