Не будем тратить время на детальное объяснение того, что происходит в коде выше
Давайте все таки разберемся. Вы используете хук useRef, который создает объект с полем current на все время жизни компонента. И ссылка на объект останется неизменной. Это важно.
Далее в этот объект вы в зависимости от условия кидаете новые ссылки на DOM элементы.
Но в хук useResizeObserver вы все также передаете ту статичную ссылку на объект рефа. Это первый звоночек, который я заметил. И далее в хуке заметил, что useEffect тоже подписан на ту самую ссылку, которая статична.
Попробуйте не переписывая ничего заменить: useResizeObserver({ elemRef, onResize: handleResize }); на useResizeObserver({ elemRef: elemRef.current, onResize: handleResize });
Т.е. я (хоть уже и не молодой) достаточно часто могу переиграть кошку в игре "кто кого цапнет на скорость".
мне кажется тут надо внести детали. Когда вы играете в эту игру, вы пользуетесь вашими знаниями о поведении кошки и некой стратегией. То есть вы планируете рассчитываете ее действия и с высокой точностью предугадываете его. На что уже достаточно легко среагировать. Кошка же наверное каждый матч ведет без какой либо тактики и уж тем более стратегии(максимум тихо подкрасться), а чисто интуитивно атакует/защищается.
Думаю если кошке накинуть навыков стратегии и интеллекта, то наверное это для вас будет как бой с профессиональным боксером или вроде того. И там ваш процент выигрыша будет не такой уж и большой.
П.С. У меня есть кошка и когда я с ней намеренно воюю, то я выигрываю. Но от внезапного "кусь" увернуться мне очень редко удается, а удается только тогда, когда я вижу, что "что не то, ща чет будет".
Видел проекты на 30+ мб рукописного реактовского кода, где обернуто абсолютно все и видел такие же проекты, где ничего не обернуто. Это все конечно ЦРМки были, но все же разницы не чувствуется
Внимание, ниже мой вывод, который может быть вообще некорректный и требует валидации.
Как я понял каждое значение имеет некие характеристики, которым можно описывать само значение(в том числе ссылка на значение в памяти). И если с так называемыми примитивами эти характеристики легко получить, то с объектами - нет.
Если я ошибся, то поправьте, но только с ссылками на офф доку, потому что тема оч интересная
хром 122.0.6261.112. захожу по https://mol.hyoo.ru/ прожимаю "энциклопедия" по центру появляется контент с кнопками с выпадающим меню. начинаю раскрывать пункты меню и подпункты - моргает экран.
в реакте такое обычно, когда 1 suspense на всю прилагу(условно)
Да, есть такие моменты, но. Я когда начинал js учить, писал код, который ломался при малейших неверных движений. Потом попал на проекты с ts. И уже долгие годы пишу на нем. Сейчас заметил, что ts под капотом дисциплинировал меня писать код с кучей проверок. Я пет проект на js чистом пишу и снова присутствуют все эти проверки. По моему это хорошо, что меня дисциплинировал ts, а не вечно падающий прод из-за моего плохого кода )
я бы сказал, что это плохо, что вы так делаете. То есть смотрите, изначально аргументом было, что визуально просто определить. Вот приду я к вам на проект и визуально смогу определить только то, что это набор импортов и пока не прочитаю каждый - не пойму что откуда и куда, а потом еще останется проследить, что оказывается это два типа.
Клоню к тому, что если вы топите за то, чтобы отделять. То надо отделять каким-либо видимым(бросающимся в глаза) образом. Ведь визуально я сразу замечу условно "черту", что сразу вызовет вопросы. А вот если нет, ну вы поняли. На ревью только всплывет, что я намешал вам импортов
Я хочу оставить эту доработку в качестве упражнения для вас, так как она окажется аналогична реализации успешного пути, и отличаться будут только используемые функции
и мой ответ в самом первом комментарии:
Так может пусть и дальше этим занимаются транспиляторы? а мы будем использовать уже всем знакомый async/await? ...
Но да ладно, чет я и так слишком "душнила" в этом треде... Сорян, мир вам
в ней предлагается все же окунуться в это дело. Конкретнее - в разделе *Дальнейшие шаги*. Вот поэтому я и предложил так не делать и не пытаться. А если все таки сильно хочется и есть идее лучше, чем сейчас, то тогда сделать пул-реквест в какой-нибудь транспилятор. И если его примут, то я бы с радостью почитал про то, что и как было улучшено.
Я хочу оставить эту доработку в качестве упражнения для вас, так как она окажется аналогична реализации успешного пути, и отличаться будут только используемые функции
Давайте все таки разберемся. Вы используете хук useRef, который создает объект с полем current на все время жизни компонента. И ссылка на объект останется неизменной. Это важно.
Далее в этот объект вы в зависимости от условия кидаете новые ссылки на DOM элементы.
Но в хук
useResizeObserverвы все также передаете ту статичную ссылку на объект рефа. Это первый звоночек, который я заметил. И далее в хуке заметил, что useEffect тоже подписан на ту самую ссылку, которая статична.Попробуйте не переписывая ничего заменить:
useResizeObserver({ elemRef, onResize: handleResize });на
useResizeObserver({ elemRef: elemRef.current, onResize: handleResize });мне кажется тут надо внести детали. Когда вы играете в эту игру, вы пользуетесь вашими знаниями о поведении кошки и некой стратегией. То есть вы планируете рассчитываете ее действия и с высокой точностью предугадываете его. На что уже достаточно легко среагировать. Кошка же наверное каждый матч ведет без какой либо тактики и уж тем более стратегии(максимум тихо подкрасться), а чисто интуитивно атакует/защищается.
Думаю если кошке накинуть навыков стратегии и интеллекта, то наверное это для вас будет как бой с профессиональным боксером или вроде того. И там ваш процент выигрыша будет не такой уж и большой.
П.С. У меня есть кошка и когда я с ней намеренно воюю, то я выигрываю. Но от внезапного "кусь" увернуться мне очень редко удается, а удается только тогда, когда я вижу, что "что не то, ща чет будет".
Видел проекты на 30+ мб рукописного реактовского кода, где обернуто абсолютно все и видел такие же проекты, где ничего не обернуто. Это все конечно ЦРМки были, но все же разницы не чувствуется
brotli же уже, какой gzip
В статье есть даже ссылки на переписку в том самом чатике. Автора спутали с небезызвестным участником хабра и кикнули за "неправильные вопросы"
Ваш пример чутка нерабочий, необходимо расширить до 4 строк кода
Вывод некорректный по итогу. А эксперимент годный. Я как раз недавно пытался по новой погрузиться в эту тему(удалось не до конца, пока на паузе).
Стоит заметить, что сразу можно откинуть источники инфы, которые пользуются определением "ссылочный/примитивный". Видимо это тянется с ES 5 https://262.ecma-international.org/5.1/#sec-4.3.2
В новой спеке используются понятия " Values without identity/ Values with identity " и то ...
https://tc39.es/ecma262/multipage/notational-conventions.html#sec-identity
Внимание, ниже мой вывод, который может быть вообще некорректный и требует валидации.
Как я понял каждое значение имеет некие характеристики, которым можно описывать само значение(в том числе ссылка на значение в памяти). И если с так называемыми примитивами эти характеристики легко получить, то с объектами - нет.
Если я ошибся, то поправьте, но только с ссылками на офф доку, потому что тема оч интересная
хром 122.0.6261.112.
захожу по https://mol.hyoo.ru/
прожимаю "энциклопедия"
по центру появляется контент с кнопками с выпадающим меню.
начинаю раскрывать пункты меню и подпункты - моргает экран.
в реакте такое обычно, когда 1 suspense на всю прилагу(условно)
Можно
Да, есть такие моменты, но. Я когда начинал js учить, писал код, который ломался при малейших неверных движений. Потом попал на проекты с ts. И уже долгие годы пишу на нем. Сейчас заметил, что ts под капотом дисциплинировал меня писать код с кучей проверок. Я пет проект на js чистом пишу и снова присутствуют все эти проверки. По моему это хорошо, что меня дисциплинировал ts, а не вечно падающий прод из-за моего плохого кода )
видимо зря я относился к этому "на забитом". Целая наука оказывается
я бы сказал, что это плохо, что вы так делаете. То есть смотрите, изначально аргументом было, что визуально просто определить. Вот приду я к вам на проект и визуально смогу определить только то, что это набор импортов и пока не прочитаю каждый - не пойму что откуда и куда, а потом еще останется проследить, что оказывается это два типа.
Клоню к тому, что если вы топите за то, чтобы отделять. То надо отделять каким-либо видимым(бросающимся в глаза) образом. Ведь визуально я сразу замечу условно "черту", что сразу вызовет вопросы. А вот если нет, ну вы поняли. На ревью только всплывет, что я намешал вам импортов
2-ой абзац согласен полностью.
Вроде уже все IDE помогает делать это автоматически
Как вы проводите черту между двумя этими типами? Пустой строкой?
Не раскрыто про порядок импортов. Почему плохо забить на этот порядок и почему важно соблюдать?
п.с. Сам на забитом отношусь к порядку этих самых импортов. Но во время ревью смотрю чтобы никто случайно не импортнул что-нибудь "не из того места"
Отмечу, что не менее приятно читать ваш диалог
No comments... like ))
Еще раз. Ваше вообщение:
Моя цитата из прочитанной вами статьи:
и мой ответ в самом первом комментарии:
Но да ладно, чет я и так слишком "душнила" в этом треде... Сорян, мир вам
в ней предлагается все же окунуться в это дело. Конкретнее - в разделе *Дальнейшие шаги*. Вот поэтому я и предложил так не делать и не пытаться. А если все таки сильно хочется и есть идее лучше, чем сейчас, то тогда сделать пул-реквест в какой-нибудь транспилятор. И если его примут, то я бы с радостью почитал про то, что и как было улучшено.
А вы читали статью ?
вы все правильно думали и внимательно прочитали.