а реакт дружит с material-ui?

Ну хотя бы по тому, что в оф доках реакта в key установливается item.id

@Dandandandan спроектируем ситуацию, есть писок элементов который ты выводишь в map, и в качестве key используешь index. Далее ты берешь и удаляешь элемент из серидины списка, реакт просто запутается какой элемент был удален

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

@Orion55 реакт со всеми дружит, если его подружить )))

Alex в виду того, что очень редко возникают ситуации когда нужен стоковый селект, как правило нужен поиск, type head, кастомное оформление и.т.д. Тот копонент, что я тебе скинул позволяет это сделать легко и быстро )

@GruFFix понял, спасибо

Thanks

https://github.com/JedWatson/react-select

Здравствуй, .Select :global {}

Оставим холивары )

Всем привет. Подскажите готовое решения для react - та https://snag.gy/JHtk2x.jpg

@Dandandandan спроектируем ситуацию, есть писок элементов который ты выводишь в map, и в качестве key используешь index. Далее ты берешь и удаляешь элемент из серидины списка, реакт просто запутается какой элемент был удален

а если элементы в списке не меняются?

то это аксиома, index использовать не круто ) Антипатерн

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

пусть будет так )

В документации реакта написано - "Мы не рекомендуем"

а если рандомом формировать key?

а если рандомом формировать key?

на каждом вызове рендера рандомные ключи?

нет, в componentDidMount()

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

глупый спор, у тебя есть item.id и есть index, проблема религии устанавивать key={item.id} или как ? в документации четко сказанно есть id устанавливайте id

может ещё расскажешь как работает реконсайлер ? :)

Может не будем устраивать холивары на очевидные ранее обдуманые и описаные в документации темы )))

Я же не мозгом с тобой мериюсь ?

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

хотя судя по тому что даже в некоторых форках реакта этого не понимают, то может быть да, не стоит думать головой и просто всегда использовать какой-то уникальный ключ :)

Всем привет. Подскажите готовое решения для react - та https://snag.gy/JHtk2x.jpg

Привет, скорее всего нужно просто использовать компонент для отображения дерева данных, например - https://github.com/pqx/react-ui-tree

Это же не нужно, можно написать плагин для жсс

Как например? :)

ReactClassInterface: You are attempting to define constructor on your component more than once. This conflict may be due to a mixin.

братцы

почему ругается

http://joxi.ru/Dr8Ood7u8j17A6

А подскажите Component will unmount сам удаляет компонент или ждет когда кто-то его удалит

Метод вызывается когда компонент удаляется из DOM

Ну в смысле, мы его либо сами удалим, либо вкладку в браузере закроем, как его еще вызвать можно?

Меня вчера на собеседовании спросили что есть componentWillUnmount { window.removeEventListener }

Вопрос был такой, почему обработчик не удалится

Я сказал что cWU не вызвался, мне сказали что он обязательно будет вызван мол это условие задачи

мало вводных

переход на другую страницу вызовет

window.removeEventListener - какой обработчик он удаляет?

window.removeEventListener - какой обработчик он удаляет?

Resize

а контекст передается туда, например, через bind(this) ?

Window.removeEventListener('resize', onScrollHandler.bind(this))

+1 админ :) Добро пожаловать

Вот так полностью

+1 админ :) Добро пожаловать

спасибо)))

Window.removeEventListener('resize', onScrollHandler.bind(this))

ну так новая функция создаётся

onScrollHandler.bind(this) ... bind создает обетрку над onScrollHandler, по этому отписаться уже не получиться, если отдельно не сохранить bindOnScrollHandler = onScrollHandler.bind(this), а потом отписываться по bindOnScrollHandler

любопытная новость, новая бета личного кабинета ВТБ сделана на react/redux/webpack, вот только что заметил, видать на этой неделе произошло

в сбера кстати тоже лич кабинет для юриков тоже на этом же стэке делается

оба в бете пока

Thanks

onScrollHandler.bind(this) ... bind создает обетрку над onScrollHandler, по этому отписаться уже не получиться, если отдельно не сохранить bindOnScrollHandler = onScrollHandler.bind(this), а потом отписываться по bindOnScrollHandler

Можешь в ЛС по подробнее написать, а чё то не вкурил

onScrollHandler.bind(this) ... bind создает обетрку над onScrollHandler, по этому отписаться уже не получиться, если отдельно не сохранить bindOnScrollHandler = onScrollHandler.bind(this), а потом отписываться по bindOnScrollHandler

бинд не создает оберток

бинд просто копирует функцию и привязывает в ней контекст

бинд просто копирует функцию и привязывает в ней контекст

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. Где я ошибся?

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. Где я ошибся?

*facepalm* Оберток не создается

constructor() { this.onScrollHandler = this.onScrollHandler.bind(this); } componentWillUnmount() { window.removeEventListener('resize', onScrollHandler) } так должно отвязаться

*facepalm* Оберток не создается

что ты под оберткой понимаешь?

onScrollHandler.bind(this) ... bind создает обетрку над onScrollHandler, по этому отписаться уже не получиться, если отдельно не сохранить bindOnScrollHandler = onScrollHandler.bind(this), а потом отписываться по bindOnScrollHandler

я об этом

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

ERROR: S client not available

А почему обертка запрещает отвязаться? Мне вот это больше не понятно

А почему обертка запрещает отвязаться? Мне вот это больше не понятно

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

А почему обертка запрещает отвязаться? Мне вот это больше не понятно

addEventListener хранит ссылку на функцию, и тебе чтобы отписатся нужна та же ссылка

А почему обертка запрещает отвязаться? Мне вот это больше не понятно

потому когда ты отвязываешь, передаешь совершенно новую функцию, а старая не отвязыается

я об этом

мы если честно не можем знать создает он обертку или нет ;)

поэтому намного лучше если есть возможность: const dispose = subscribeToEvents(callback) dispose() // unsubscribed

мы если честно не можем знать создает он обертку или нет ;)

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

Thanks

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

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

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

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

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

зависит от реализации как раз таки...

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

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

А если подписаться на такую же функцию тоже с bind(this)

А если подписаться на такую же функцию тоже с bind(this)

.bind каждый раз создает новую функцию

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

похоже что обертка легче для реализации)

.bind каждый раз создает новую функцию

Пиздец я тупой кароч)

похоже что обертка легче для реализации)

только кажется так copy and fill на плюсах скорее всего проще и не создает оверхеда в отличие от вызова функции

Пойду учить джс

только кажется так copy and fill на плюсах скорее всего проще и не создает оверхеда в отличие от вызова функции

вызов можно заинлайнить

вызов можно заинлайнить

не в рантайме

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

не в рантайме

в рантайме jit

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

+

в рантайме jit

инлайнинг функций эт не к jit вроде

@Dandandandan вот твоё решение

инлайнинг функций эт не к jit вроде

ну конечно ты на jit не сможешь повлиять, но он заинлайнить может) ладно, сидим тут как гадалки)

@Dandandandan вот твоё решение

Спасибо, но я уже не прошел собеседование))

так ты собеседку проходил...