Хз к чему ты.

либо производительность либо прокидывать ид через компонент и там свой onClick

Всем привет! Подскажите, кто как реализует? Без биндов? Есть список фильтров, у каждого элемента списка есть иконка удаления из списка. Задача: нужно при нажатии на иконку удалить элемент. bind использовать нет возможности - ведь он каждый раз новую функцию возвращает. Как в обработчик события пробросить id удаляемого элемента?

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

вы внатуре в это уперлись - создание функции прям тормозит?

Создание функции приводит к тому, что пропс onClick каждый раз меняется => следовательно перерисовка компонента.

Создание функции приводит к тому, что пропс onClick каждый раз меняется => следовательно перерисовка компонента.

капитан

Ок, спасибо

и что?

Я ответил не тебе

Should update не?

pureComponent

Не чекать функции на перерендер

Понял, спасибо большое)

либо pure с recompose

pure все чекает

onlyUpdateForKeys

либо shouldUpdate

либо pure с recompose

Это бред

С рекомпозом хорошо просто функции

С рекомпозом хорошо просто функции

а где было условие что компонент это класс?

Pure было

А ты все правильно написал

да чет тупанул

оффтоп - mapStateToProps кстати обязательно должна быть чистой? А то там есть один getBoundingClientRect...

оффтоп - mapStateToProps кстати обязательно должна быть чистой? А то там есть один getBoundingClientRect...

Да вроде однозначно не сказано, что она должна быть чистой

Но такую хрень я выношу за коннект в mergeProps скажем

mapStateToProps про редакс, какое ему дело до каких-то getBounding

mapStateToProps про редакс, какое ему дело до каких-то getBounding

не всегда только redux, иногда и ownProps используются

Чёт эти ваши styled components какие-то стрёмные

Че такое?

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

резонно

Че такое?

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

Аргументированенько

А че крутого в стилях в JS?

Зачем?

Аргументированенько

Ну типа почему у меня засирается js стилями?

Вот-вот, это хороший контраргумент)

А аргументов ЗА пока не вижу.

Если говорить относительно модулей, то не нужно писать тонны бойлерпейта типа компонента Button, который принимает 10 пропсов и имеет большой classNames со всеми пропсами и стилями-модификаторами

Потому что уровень абстракции другой. У тебя есть компонент - это не только js, но и стили. Один компонент - один файл

Если говорить относительно модулей, то не нужно писать тонны бойлерпейта типа компонента Button, который принимает 10 пропсов и имеет большой classNames со всеми пропсами и стилями-модификаторами

Спасибо, почитаю) Пока не понимаю о чем ты.

Минут через 20 напишу примере

Потому что уровень абстракции другой. У тебя есть компонент - это не только js, но и стили. Один компонент - один файл

Ну Один компонент - два файла Логика и представление разделены, всё по заветам великих

В чем проблема?

В чем проблема?

jsx по заветам великих?

Потому что уровень абстракции другой. У тебя есть компонент - это не только js, но и стили. Один компонент - один файл

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

jsx по заветам великих?

Ты аргументов хотел, сам-то какие-нибудь приведешь?

Было уже обсуждение вчера вечером. "потом хрен разберешься" - крайне придуманное утверждение. Смотря как использовать SC и css шт js

Я понял Короче, нахуй SC, не хватало мне ещё стили с логикой в одном файле иметь

Ну типа import styles ... const Button = ({ className, primary, mini, children, ...props }) => ( <button className={ classNames( className, styles.button, { [styles.primary]: primary, [styles.mini]: mini } ) } {...props} > {children} </button> ) Вот такой бойлералейт для каждого сраного компонента со стилями я писать заебался

Добрый день, нужна помощь. Точнее есть вопрос render(){ input = <div> <input ref={(item) => this.obComponentNode = item} </div>; return (<div className="ct-form__row">{input}</div>); } когда станет доступным this.obComponentNode из ref ? пробую в componentDidMount а там undefined ((

https://gist.github.com/artalar/cca9163e9065469f666e22e6ad99bc69 Вот пример компонента, только сегодня написал. Стили достаточно далеко, что бы не мешаться, при этом достаточно близко - не нужно ходить в соседний файл. Так же часто бывает, что стили зависят от пропсов или стейта, а этом случае удобно, когда код находится рядом

Ну типа import styles ... const Button = ({ className, primary, mini, children, ...props }) => ( <button className={ classNames( className, styles.button, { [styles.primary]: primary, [styles.mini]: mini } ) } {...props} > {children} </button> ) Вот такой бойлералейт для каждого сраного компонента со стилями я писать заебался

ебать ты маяковский

С телефона пишу

Отмечу, что шторм подсвечивает стили SC

Отмечу, что шторм подсвечивает стили SC

Месяц или два как)

Впритык

Впритык

Это у тебя лопата просто))

Да не, не самый большой телефон у меня

Охтыж, это можно мозг свернуть) Ничем не лучше длинного className) Но если будут хорошие библиотечки - то идея хорошая.

По мне так лучше тогда webpack использовать. Он же тоже умеет вроде генерировать уникальный css классы, и в react можно его использовать

Ну так, именно пример такого я и скинул выше

Чтобы потом в коде делать <Button mini>hello</Button>

Тогда это треш. Пример Артема гораздо лучше.

Ну так я же про то же

ERROR: S client not available

Добрый день, нужна помощь. Точнее есть вопрос render(){ input = <div> <input ref={(item) => this.obComponentNode = item} </div>; return (<div className="ct-form__row">{input}</div>); } когда станет доступным this.obComponentNode из ref ? пробую в componentDidMount а там undefined ((

есть кто может ответить?

хэлп

Поэтому я использую styled-componets

А, я понял

Как у Артема

Ну да, styles components хорош в крупных проектах, где есть необходимость)

Спасибо. Понял

Как у Артема

что как уменя?)

Не тебя)

что как уменя?)

=[

ну блиииииин

есть кто может ответить?

просто делай логику в колбэке рефа и проверяй на null ref там

а когда вообще происходит присваивание из ref?

Рендер?

ну я тоже так думал

https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

А разве при пятом подходе функция не создается внутри кажого инстанса класса

это же всё равно, что писать функцию прямо в конструкторе

Ну да, только проще

ну это ж фигово

Потому что бинды можно и забыть, незачем конструктор засирать

просто делай логику в колбэке рефа и проверяй на null ref там

Не надо так делать

т.е. у нас функция не в прототипе, а именно в инстансе будет

Не надо так делать

why not

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

т.е. у нас функция не в прототипе, а именно в инстансе будет

И что

т.е. у нас функция не в прототипе, а именно в инстансе будет

Ну так и че? Инстанс создается не так часто, а выбора-то нет

why not

Реакт не просто так отдаёт null в рефе, а именно когда элемент не отрендерился

как инстанс не так часто создается

если это элемент списка

Ну не так часто, как рендер

какой-нить ListItem

Реакт не просто так отдаёт null в рефе, а именно когда элемент не отрендерился

и