автордың кітабынан сөз тіркестері React быстро. Веб-приложения на React, JSX, Redux и GraphQL
Обратите внимание на следующие ресурсы сообщества:
• Список компонентов React: https://github.com/brillout/awesome-react-components и http://devarchy.com/react-components.
• Набор компонентов React, реализующих спецификацию Google Material Design (https://design.google.com): http://react-toolbox.com.
• Компоненты React для Material Design: www.material-ui.com.
• Подборка компонентов React для взаимодействий в стиле Office и Office 360 (http://dev.office.com/fabric#/components), использующих язык Office Design Language: https://github.com/OfficeDev/office-ui-fabric-react.
• Подборка пакетов JS (в основном React) с открытым кодом: https://js.coach.
• Каталог компонентов React: https://react.rocks.
• Компоненты React из Khan Academy: https://khan.github.io/react-components.
• Каталог компонентов React: www.reactjsx.com.
1 Ұнайды
Эти вспомогательные библиотеки позволяют расширять функциональность, работать с неизменяемыми данными (https://github.com/kolodny/immutability-helper) и проводить тестирование.
Визуализатор для интерфейса терминала blessed (https://github.com/chjj/blessed): http://github.com/Yomguithereal/react-blessed.
• Визуализатор для библиотеки ART (https://github.com/sebmarkbage/art): https://github.com/reactjs/react-art.
• Визуализатор для <canvas>: https://github.com/Flipboard/react-canvas.
• Визуализатор для 3D-библиотеки с использованием three.js (http://threejs.org): https://github.com/Izzimach/react-three.
• Визуализатор для виртуальной реальности и интерактивных панорамных сред: https://facebook.github.io/react-vr.
Разработчику приходится использовать другие инструменты, такие как Reactive Extensions (RxJS, https://github.com/Reactive-Extensions/RxJS), для формирования асинхронных потоков данных с Observable.
Продолжая введение в React, посмотрим, как React интегрируется в веб-приложение.
Еще одно преимущество виртуальной модели DOM — возможность проведения модульного тестирования без браузеров, не имеющих графического интерфейса, например PhantomJS (http://phantomjs.org). Существует Jest (https://facebook.github.io/jest), основанный на Jasmine (http://jasmine.github.io), который позволяет тестировать компоненты React прямо из командной строки!
ПРИМЕЧАНИЕ Если вас интересует техническая сторона алгоритмов и О большие, следующие две статьи отлично объясняют, как команде React удалось превратить задачу O(n3) в задачу O(n): «Reconciliation» на сайте React (http://mng.bz/PQ9X) и «React’s Diff Algorithm» Кристофера Шедо (Christopher Chedeau) (http://mng.bz/68L4).
С другой стороны, виртуальная модель DOM React существует только в памяти JavaScript. Каждый раз, когда происходит изменение в данных, React сначала сравнивает различия по своей виртуальной модели DOM; только когда библиотека знает, что в рендере произошли изменения, она обновляет фактическую модель DOM. На рис. 1.1 изображена высокоуровневая схема работы виртуальной модели DOM React при изменении данных.
Рис. 1.1. После того как рендеринг компонента будет выполнен, при изменении состояния он сравнивается с виртуальной моделью DOM, находящейся в памяти, и в случае необходимости рендерится заново
Другой пример абстракции DOM в React — возможность рендера элементов React на сервере. Данная возможность может пригодиться для улучшения поисковой оптимизации (SEO, Search Engine Optimization) и/или улучшения быстродействия.
Например, при создании события onClick в React обработчик события получает не платформенный объект события для конкретного браузера, а синтетический объект события, который является оберткой для платформенных объектов событий. Вы можете рассчитывать на одинаковое поведение синтетических событий независимо от того, в каком браузере будет выполняться код.
Стоит заметить, что метод map() не является исключительной особенностью React. Вы можете использовать его с другими фреймворками, потому что он является частью языка. Однако благодаря декларативной природе map() идеально сочетается с React.