Download as PDF, PPTX
Uploaded byFrontDays
FrontDays #1. Алексей Ульянов, React.js и методологии разработки на нём
Документ описывает библиотеку React и методологию Flux для разработки пользовательских интерфейсов. Рассматриваются принципы однонаправленного потока данных и использования Redux для управления состоянием приложений. Также акцентируется внимание на простоте, предсказуемости и масштабируемости кода при использовании данных технологий.
FrontDays #1. Алексей Ульянов, React.js и методологии разработки на нём
- 1. и методологии разработки АлексейУльянов Lead Developer at Weblime
- 2. Знакомьтесь, React. Это неочередной фреймворк
- 3. Знакомьтесь, React. Но библиотекадля создания пользовательского интерфейса (UI).
- 4. Знакомьтесь, React. Отдаёт вашUI и реагирует на события.
- 5.
- 6. Ре-рендер, не мутации Создавайтекомпоненты, а не шаблоны Быстрый виртуальный DOM
- 7. React не имеет... ...контроллеров ... директив ... шаблонов ... глобальных слушателей событий ... моделей
- 8.
- 9. Но компоненты надо как-тоорганизовать
- 10.
- 11. Для начала, надопонять какую боль она решает
- 12.
- 13. Представления обновляют модели. Моделиобновляют другие модели.
- 14. Flux решает этипроблемы. Однонаправленный поток данных
- 15.
- 16. Action - Передача данныхв Dispetcher - Запросы к API
- 17. Dispetcher - Передача данныхв Store
- 18. Store - Информировать view(представления) - Хранить состояние
- 19. View - Получение данных -Отображение данных
- 20. Как это выглядит вреальной жизни
- 21. Отображение данных Обработка пользовательскихданных Мы запустим поток данных через действие пользователя.
- 22. Поток данных Отображение данных Обработкапользовательских данных 1. View (представление) говорит создателю action (действия) выполнить его.
- 23. Поток данных Отображение данных Обработкапользовательских данных 2. Создатель action (действия) форматирует его и отправляет dispetcher (диспетчеру).
- 24. Отображение данных Обработка пользовательскихданных 3. Dispetcher (диспетчер) отправляет действие store (хранилищам) последовательно.
- 25. Отображение данных Обработка пользовательскихданных 4. Как только состояние изменилось, store (хранилища) дает об этом знать всем подписанным на него контроллерам. 5. Эти контроллеры затем запросят у store (хранилища) обновленное состояние.
- 26. Отображение данных Обработка пользовательскихданных 6. После того как store (хранилище) отдает состояние, контроллер передаст его дочерним view (представлениям) запрос на повторное отображение согласно новому состоянию.
- 27. Звучит здорово? Давайте взглянемна Redux
- 28.
- 29. Какие проблемы решает 1.Код хранилищ не может быть перезагружен без обнуления состояния
- 30. Какие проблемы решает 1.Код хранилищ не может быть перезагружен без обнуления состояния РЕШЕНИЕ Просто разделите эти две функции.
- 31. Какие проблемы решает 2.Состояние перезаписывается при каждом действии
- 32. Какие проблемы решает 2.Состояние перезаписывается при каждом действии РЕШЕНИЕ Скопируйте состояния и примените изменения к копии.
- 33. Какие проблемы решает 3.Нет правильных “мест” для сторонних плагинов
- 34. Какие проблемы решает 3.Нет правильных “мест” для сторонних плагинов РЕШЕНИЕ Сделать легким “оборачивание” частей системы в другие объекты.
- 35. Редьюсеры (The reducers) Отображениеданных, обработка пользовательских данных. Когда хранилище хочет узнать, как действие изменяет состояние, оно спрашивает reducer (редьюсеры).
- 36. Отображение данных Обработка пользовательскихданных Как это работает 1. Подготовить хранилище. Корневой компонент создаёт хранилище, говоря ему, какой корневой редьюсер использовать
- 37. Отображение данных Обработка пользовательскихданных Как это работает 2. Установить связь между хранилищем и компонентами.
- 38. Как это работает 3.Подготовить обратные вызовы для действий. Отображение данных Обработка пользовательских данных
- 39. Что ещё? • Простотаи предсказуемость • Мало магии • Линейное масштабирование • Малое количество абстракций • Boilerplate
- 40.