@react_js - страница 273 - Telegram web archive

Vadim

Вообще в целом по экосистеме 🙂

они уже все устареть успели)

Vadim

Какую книгу посоветуйте по React 16 на русском?

выбирай https://www.piter.com/collection/all?q=react

Александр

выбирай https://www.piter.com/collection/all?q=react

Господи, не знал что целые книги есть уже, там библиотека вся - на пару вечеров документацию полистать. А потом только практика.

Vadim

Господи, не знал что целые книги есть уже, там библиотека вся - на пару вечеров документацию полистать. А потом только практика.

да сейчас по чему угодно есть

Anonymous

выбирай https://www.piter.com/collection/all?q=react

Спасибо, уже качаю кабана

i

всем привет, подскажите http://prntscr.com/nw1nrc как прокрутить контейнер компонента вниз когда у него контент пополнился новым блоком?

i

this.scrollTop = this.scrollHeight;

i

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

Aliaksandr

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

В рендере неправильно. Делай как реакцию на изменение свойств. И нужно понимать разницу между this для компонента (Function/Class Scope) и собственно самой ссылкой на компонент

i

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

Aliaksandr

@Mramoris, ref в реакте. https://reactjs.org/docs/refs-and-the-dom.html

Aliaksandr

Ссылка сохраняется после mount'а. Уже в componentDidUpdate() можно использовать эту ссылку, чтобы прокрутить элемент вниз

Aliaksandr

Ну и не забудь это все инкапсулировать. Полагаю, задача компонента не в прокручивании контента вниз, а в отрисовке сообщений

i

да

i

http://prntscr.com/nw1swt не так?

Aliaksandr

Не совсем. Ссылка создается в конструкторе или как classProperty. Она неизменяемая. А потом ее передаешь как свойство в элемент, DOM-ссылку которого хочешь сохранить

Aliaksandr

В рендере будет код что-то вроде: <div className="wrapper" ref={this.myRef}>. А в componentDidUpdate() делаешь this.myRef.current.scrollTop = this.myRef.current.scrollHeight

i

http://prntscr.com/nw1uri

i

http://prntscr.com/nw1vhx почему-то он в дид апдет даже консоль лог не выводит

Andrei

Блять, читайте доку

Andrei

Бесите

Andrei

Там всё это описано, это база

🦜

))

Александр

Умение читать сейчас увы к потерянным навыкам относится

Aliaksandr

Обращение к этому DOM-элементу возможно только через .current-свойство. А консоль не логируется, если обновления не было

Aliaksandr

И да, советую внимательно копировать код из документации, там ведь подробно написано

Andrei

Обращение к этому DOM-элементу возможно только через .current-свойство. А консоль не логируется, если обновления не было

Не надо объяснять

Andrei

Пусть сам

Andrei

Трясёт

Andrei

Уже даже русская дока есть

Aliaksandr

Вопрос из разряда мелких оптимизаций. Какой компонент быстрее работает и почему: который наследуется от чего-то или полученный в результате оборачивания? Кто разбирался в этом?

Александр

Вопрос из разряда мелких оптимизаций. Какой компонент быстрее работает и почему: который наследуется от чего-то или полученный в результате оборачивания? Кто разбирался в этом?

Что значит наследуется ?

Andrei

extends

Andrei

наверное

Aliaksandr

class A extends React.Component {}

Александр

class A extends React.Component {}

Нет разницы

Aliaksandr

Хм, а так-то при наследовании прототипы и все прочее затрагивается

Aliaksandr

А при оборачивании реакт тянет свое

Александр

Нет разницы

Если быть точнее, то это уже premature optimization, если только вы уперлись в производительность и других путей оптимизации нет, то можно и такими вопросами задаться. На моем опыте до такого не доходило.

Aliaksandr

Насколько я помню, наследование быстрее работало года полтора назад. Но в тот момент могла сыграть роль оптимизация на уровне движка. Разумеется, это уже детали, однако я с таким уже сталкивался. Все от требований к продукту зависит

Александр

Насколько я помню, наследование быстрее работало года полтора назад. Но в тот момент могла сыграть роль оптимизация на уровне движка. Разумеется, это уже детали, однако я с таким уже сталкивался. Все от требований к продукту зависит

У вас практический интерес или теоретические изыскания по этому вопросу?

Aliaksandr

На данный момент теоретический интерес. В то время - практический

Александр

На данный момент теоретический интерес. В то время - практический

То есть упирались в производительность приложения и этот вопрос встал на повестке? P.S. Извиняюсь за занудство, но действительно интересно

Aliaksandr

Нужно конкретизировать "упирались в производительность". Задача - спроектировать архитектуру FE-приложения и дать объяснение, почему так лучше, чем по-другому. Я могу путать, но там играла роль оптимизации на уровне V8

Aliaksandr

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

Aliaksandr

Ну и по этой же причине я советовал @Mramoris убрать скролл из render() 🙂

Александр

Ну и по этой же причине я советовал @Mramoris убрать скролл из render() 🙂

Не в курсе проблемы со скролом к сожалению, не так давно тут

Aliaksandr

render() { this.aRef.current.scrollTop = this.aRef.current.scrollHeight; // Code goes here }

i

Aliaksandr спасибо

Александр

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

Мнение которое я пытаюсь донести, да вы и так уже поняли, конечно, заключается в том, что заранее думать о таких мелочах как разница в производительности компонента унаследованного от другого (что кстати довольно редкий паттерн, о чем и пишется в документации прямым текстом - используйте лучше композицию) или возвращающего внутри себя другой - ну просто е имеет смысла. Есть ряд факторов влияющий на performance гораздо существеннее

Александр

render() { this.aRef.current.scrollTop = this.aRef.current.scrollHeight; // Code goes here }

render не должен вызывать side effects

Aliaksandr

render не должен вызывать side effects

Самое время вспомнить про хуки...

Александр

Самое время вспомнить про хуки...

А что с ними не так, перевёл последний проект на них, доволен

Andrey

Всем привет

Aliaksandr

Мнение которое я пытаюсь донести, да вы и так уже поняли, конечно, заключается в том, что заранее думать о таких мелочах как разница в производительности компонента унаследованного от другого (что кстати довольно редкий паттерн, о чем и пишется в документации прямым текстом - используйте лучше композицию) или возвращающего внутри себя другой - ну просто е имеет смысла. Есть ряд факторов влияющий на performance гораздо существеннее

Абсолютно. Но заказчики часто требуют от инженеров фактов

Александр

Абсолютно. Но заказчики часто требуют от инженеров фактов

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

Aliaksandr

А что с ними не так, перевёл последний проект на них, доволен

https://reactjs.org/docs/hooks-reference.html#useeffect Я всегда был в восторге от этих предложений: "Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI. Instead, use useEffect. The function passed to useEffect will run after the render is committed to the screen. Think of effects as an escape hatch from React’s purely functional world into the imperative world."

Yaroslav

Всем привет

Перекатится с питона решил?

Andrey

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

Yaroslav

Вот и правильно, у нас есть кукис

Yaroslav

Хуки

Александр

https://reactjs.org/docs/hooks-reference.html#useeffect Я всегда был в восторге от этих предложений: "Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI. Instead, use useEffect. The function passed to useEffect will run after the render is committed to the screen. Think of effects as an escape hatch from React’s purely functional world into the imperative world."

Я знаком с документацией и внутренней реализаций, не совсем понимаю к чему вы дали ссылку?

Aliaksandr

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

Да. При проектировании определенных систем такое требуют. На вопрос "почему" не отвечу вам. У заказчиков свои причуды. Если вы клоните к тому, донес ли я до них о незначительности таких оптимизаций, то да, донес 🙂

Andrei

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

Если заказчики — деды, которые пытаются сделать умный вид, то вполне ожидаемо. Но с такими я бы боролся)

Aliaksandr

Я знаком с документацией и внутренней реализаций, не совсем понимаю к чему вы дали ссылку?

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

Aliaksandr

Если заказчики — деды, которые пытаются сделать умный вид, то вполне ожидаемо. Но с такими я бы боролся)

Ну так это если бы я им платил...

Александр

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

Чему противоречит? Вас смущает что Теперь stateless functional components уже не обязательно stateless?