React JS #12 Ссылки (Refs)

#YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
- Валидация пропсов с помощью библиотеки PropTypes
- Работа с реальным API
- Создание роутинга одностраничного приложения с помощью React Router
- Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/re...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/facebook/create-re...
✔ React Developer Tools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (репозиторий): github.com/zalmoxisus/redux-d...
✔ Fake online REST API (моковый API): jsonplaceholder.typicode.com/
✔ Hacker News (ресурс): hn.algolia.com/?query=&sort=b...
✔ Hacker News (описание API): hn.algolia.com/api
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/package/redux-l...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/docs/getting-star...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity.org/react-tran...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtekmaj.pl/react-li...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com/wp-content/upl...
✔ React Transition Group (документация): reactcommunity.org/react-tran...
✔ React Router (репозиторий): github.com/ReactTraining/reac...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@iuriivatazhyshyn1568]

Даже понять не могу Кто же ети люди, что за такой качевственний контент ставят дизлайки. Спасибо за видео!

[@YauhenKavalchuk]

Спасибо за отзыв)

[@dvergilyush]

это не дизлайки, а лайки, которые ставят австралийцы :)

[@user-hw2mo6ty2n]

Круто, спасибо большое за качественный контент!

[@YauhenKavalchuk]

Спасибо и вам за обратную связь

[@Ramosok]

Сколько у тебя полезных роликов. Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@yusufrahimov9160]

Спасибо за то, что вы потратили время и усилия на создание этого видеоурока. 💪 Это действительно помогло мне улучшить мои знания по теме. 📈

[@YauhenKavalchuk]

Спасибо большое

[@alexsoft7073]

отличное видео. спасибо)

[@YauhenKavalchuk]

Пожалуйста

[@marabej]

Хороший урок. Только одна заметка. refs довольно използваемая щука. Я занимался с react native и там за мой проект употреблял часто refs. дело в том что иногда render довольно медленной. Часто приходилось използуват прямой доступ до елемент с метод типа SetNattiveProps. Я вам честно скажу, что иногда не хватает концепция "сделай возможно болше компонентов чтоб ускорить рендеринг и обновляй только то что нужно". Часто с цель performance приходилось прямий доступ чрез refs. Кроме того можно реализирует механизм за доступ от родителских компонент к елементов внутрии дочерного компонента (за React Native, за React я не знаю).

[@YauhenKavalchuk]

Согласен, у ref больше возможностей чем описано, есть ещё вариант записывать и хранить данные в ref, так как это быстрее

[@slavik.nychkalo]

Спасибо за видео! НО есть вопросы к такому хендлингу форм, зачем использовать controlled и uncontrolled (в совокупности) подход к работе с формами?

[@YauhenKavalchuk]

Возможно, я допустил ошибку. Нету плюсов такого подхода - форма всегда должна контролироваться

[@iGotton]

+

[@user-vd6gb5bc3x]

Подскажите пожалуйста, а если я динамически через цикл создаю элементы DOM. Как динамически мне также создать все refs (createRef())?

[@YauhenKavalchuk]

Да, можно и так. Хотя, как я и говорил ref желательно использовать по минимуму.

[@user-vd6gb5bc3x]

@@YauhenKavalchuk Спасибо за ответ, но я именно спрашивал про способ реализации :) Не совсем понимаю как createRef() можно в цикле прописать

[@demik3106]

@@user-vd6gb5bc3x можно вот так в конструкторе класса прописать: const refs = ['inputRef', 'areaRef'] .forEach(item => ( this[item] = React.createRef() ));

[@user-qj2yg1rn3j]

во, и МЖЦ тут описал. Вот бы так в прошлом видео

[@YauhenKavalchuk]

Тогда бы получилось, что 2 раза рассказал одно и тоже)

[@DubinArtur]

Переделать звучит грубо, обидно, а вот проабдейтить или зарефакторить самое то)

[@YauhenKavalchuk]

Учту

[@some_body_qtyeeuy]

Есть ролик про useCallback и useMemo?

[@YauhenKavalchuk]

В плейлисте React videocast

[@TORREScs]

у меня ругается редактор на то что inputRef textreaRef и selectRef not defind. почему у вас не ругается, а у меня ругается? и не могу применить такой вариант inputRef = React.createRef()

[@YauhenKavalchuk]

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

[@TORREScs]

@@YauhenKavalchuk спасибо, большое!

[@pendalfgrey1]

Как насчет такого? state = { name: "", phone: "", }; handleChange = (values, event) => { this.setState({ [values]: event.current.value }); }; onChange={this.handleChange.bind(this, "name")} onChange={this.handleChange.bind(this, "phone")}

[@YauhenKavalchuk]

Тоже вариант

[@vanyavoskres]

state = { firstName: "", secondName: "" } handleChange = (e) => { const {name, value} = e.target; this.setState({ [name]: value }) } render() { const {firstName, secondName} = this.state; return ( ) }

[@jenyaspace]

не знаете как получить детей на рефу? например current.childNodes ничего не видит

[@YauhenKavalchuk]

А что мешает прицепить ref на все нужные элементы?

[@jenyaspace]

@@YauhenKavalchuk это не возможно сделать т.к. дети моего компонента находятся во внешней библиотеке, к ним нет доступа

[@user-zf1kq1vu2j]

Хм, да, мы избавились от тех прохожих методов, но при этом у нас теперь будут перерисовываться все 3 компонента при изменении одного из них. На данном примере это не ощутимое различие, а вот в более крупном проекте думаю может ударить по производительности

[@YauhenKavalchuk]

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

[@user-mw9fi7po2u]

Возможно я чего-то не понимаю, но как по мне ничего не изменилось. В первом случае с методами, мы сетили в стейт значение для каждого элемента отдельно, что в свою очередь перезапускало рендер и перерисовывался элемент, для которого изменилось значение в стейт. Остальные оставались без изменений, то есть перерисовывался 1 элемент. Во втором случае мы сетим значения со всех элементов вместе. После чего срабатывает рендер и перерисовывается опять таки один элемент в которого изменилось значение в стейте. Для остальных элементов значения которые хранятся в стейте остались прежними и виртуал дом должен их пропустить и не перерисовывать. Получается что перерисуется опять только 1 элемент. Поправьте меня если ошибаюсь.

[@yurigorsky3164]

Ну во-первых, у нас не 3 компонента, а 1, и в любом случае, каким способом ты не повесь обработчики, метод render у компонента Form будет вызываться каждый раз при изменении любого из полей. Это первое. Во-вторых, даже если вы замените поля на отдельные компоненты (что вы скорее всего имели в виду), то при вызове setState на компоненте-родителе все render'ы на дочерних компонентах обязательно вызовутся. Так задумано в React изначально. Чтобы не отрисовывать дочерние компоненты, вам нужно в их методе shouldComponentUpdate вернуть false, а это уже другая история и это не зависит от того, будет ли один обработчик для всех полей или будет на каждое поле свой обработчик. Чтобы сэкономить на лишних рендерах, вам нужно в дочерний компонент пробросить через пропсы value, а в методе shouldComponentUpdate сравнить текущий value у пропс, с тем, который прилетит при изменении стейта родителя.

[@user-vi1jf3xb3e]

@@yurigorsky3164 Все правильно сказал про setState, просто ref помогает свести кол-во обработчиков к минимуму но его лучше не использовать где попало тк React это все таки декларативный подход.