выглядит интересно

особенно с селекторами

и денормализацией

https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7

как вам такой поход?

Привет! Я чат пытаюсь читать уже наверное два дня, а про традицию прочла только сейчас :D В общем, я верстальщик, которые в тоже время Джун и около полугода я связалась с React. Но так как я на самообучении, порой возникает куча вопросов, которые некому задать. Я сама из Новосибирска, в чате надеюсь найти много полезной для себя информации, постараюсь быть вам полезной (с вёрсткой уж точно смогу помочь), группу где-то в каком чате рекомендовали :) Вот как то так :D #whois

Блин, а я даже не представился

Привет! Я чат пытаюсь читать уже наверное два дня, а про традицию прочла только сейчас :D В общем, я верстальщик, которые в тоже время Джун и около полугода я связалась с React. Но так как я на самообучении, порой возникает куча вопросов, которые некому задать. Я сама из Новосибирска, в чате надеюсь найти много полезной для себя информации, постараюсь быть вам полезной (с вёрсткой уж точно смогу помочь), группу где-то в каком чате рекомендовали :) Вот как то так :D #whois

К релокейту как отношение?

Штаны?

Что? :)

Блин, а я даже не представился

я тоже)

Ребят, вопрос. Есть массив категорий [{id: , title: }]. Вывожу их в реакт.компоненте ссылками. Хочу, чтобы при клике по каждой такой ссылке срабатывала функция, и внутри нее я бы получал доступ к id: той категории, по ссылке которой кликнул.

К ссылке привязываю функцию так: onClick={this.handleClick}. Вопрос - как внутри handleClick получить информацию о категории, по ссылке которой я кликнул.

из пропсов

К ссылке привязываю функцию так: onClick={this.handleClick}. Вопрос - как внутри handleClick получить информацию о категории, по ссылке которой я кликнул.

onClick={e => this.handleClick(catId)}

onClick={e => this.handleClick(catId)}

Cомневался, нормален ли такой способ, может можно иначе. Благодарю.

Cомневался, нормален ли такой способ, может можно иначе. Благодарю.

Абсолютно нормален

onClick={e => this.handleClick(catId)}

он на каждый ререндер будет создавать функцию, если тебе ок то ок

а можно делать const handleClick = (cat) => (e) => {}

он на каждый ререндер будет создавать функцию, если тебе ок то ок

Ну и ладно. Это проблема?

а можно делать const handleClick = (cat) => (e) => {}

и-и-и?

ну типа создание функции дорогая операция

лучше ее создавать заранее

Ну типа у тебя её нету?

а не на каждый ререндр

Ну вот ты ей cat передал

Или как это выглядит?

например можно сделать в конструкторе компонента this.handleClick = (cat) => (e) => {}

И как ты туда cat передашь?

onClick = {this.handleClick(cat)}

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

onClick = {this.handleClick(cat)}

То есть ты тут щас не создал функцию?

То есть ты тут щас не создал функцию?

Нет

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

Именно

как вы вообще пишете на реакте

с такими познаниями

onClick = {this.handleClick(cat)}

После handleClick есть такие круглые скобочки ( и ), что значит что ты её выполнил, а она у тебя возвращает новую функцию. И это каждый рендер делается, гений чёртов.

а, опс, я тупой

звиняйте, оно же не так работает

Приношу свои извинения благородным господам

рюсское коммьюнити

ээ, а что не так

Оно же только по onClick выполнится вообще

а, и правда

там клик

эх, как то грустно стало

эх, как то грустно стало

?

хм, с этим рекомпоузом совсем мозги атрофировались

эх, как то грустно стало

йеп

можно на самом деле создать две функции и вынести за пределы компонента вообще, тогда они будут созданы единожды, когда будет подключен компонент

ну и вот тест, можно посмотреть на сколько дорого создавать функции https://jsperf.com/named-or-anonymous-functions/12

И всё же

Функции создаются

Так что это не я тупой

То, что в скобках, выполнится при рендере

вернёт новую функцию, и она уже выполнится на клик

разве что можно понадеяться на мемоизацию движком или какой-нибудь либой

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

onClick = {this.handleClick.bind(this, cat)} что мешает так написать? зачем вызывать функцию и там возвращать новую?

ERROR: S client not available

я может упустил момент почему нужно именно вызывать

битва была за то, чтоб создавать меньше функций

зачем вообще функции создавать

зачем вообще функции создавать

Действительно

Вообще на самом делел плевать, создаются они или нет, если это не боттлнек (это всегда не он)

Создаются

так что зря извинялся

Да это неважно

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

смотреть на то, что ты меняешь

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

Всем привет! Посоветуйте пожалуйста хорошою книжку по React/Redux, желательно 17 года.

redux.js.org

а кроме офф туториала?

onClick = {this.handleClick.bind(this, cat)} что мешает так написать? зачем вызывать функцию и там возвращать новую?

Ещё хуже)

бинд медленнее стрелки

а кроме офф туториала?

awesone-redux там статьи есть

Да, очень хорошая книга, каждый раз перечитываю

Чат для Instagramщиков: ‼️@inst_admins ‼️

аааа ахмед зачем ты так

глаза режет?

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

У меня друган прокурил, что на самом деле новые функции не будут создаваться, так как они в js-движке кешируются. Проблема в другом. О ней говорится в оф. документации. https://facebook.github.io/react/docs/handling-events.html Читайте последний абзац.

т.е оно в движке закешировалось, но будет возвращаться другая функция ?

Функция таже, но происходит перерендер, что может быть накладно, если в твоей иерархии компонентов везде не стоит SCU.

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

Нормально сделали