Я дошел до того, что в моей карьере, когда я могу строить хорошие интерфейсы в относительно короткие сроки.
Это может звучать очень скромно Но это просто следствие того, чтобы делать то же самое в течение длительного времени, вы начинаете хорошо справляться с этим.
Однако, несмотря на то, что я способен построить действительно хороший пользовательский интерфейс, я никогда не строил что -то, что заставляло людей «вау».
Я говорю о таких вещах:
Вау , Правильно?
Этот твит заставил меня задуматься, что реагирование-три волокна может быть именно тем, что мне нужно, чтобы увеличить свою фронтальную игру. Поэтому я решил узнать это и Узнайте это хорошо .
И угадайте, что? Я беру тебя с собой в серии статей, когда мы переходим …
Зона реагирования-три волокна
*Cue Spooky Intro Tune*
Как вы можете видеть из предыдущего твита, мы можем сделать несколько средних 3D с реагированием-тройка. Но нам нужно ползти, прежде чем идти, так что давайте начнем с самого начала и сделаем это простым.
Сегодня в «Зоне реагирования с тремя волокнами» мы собираемся ответить только на два вопроса: «Что такое рендерератель React?» и “Что такое три.js?”.
Начнем:
Согласно его readme.md, React-три волокна:
«Реактирование реагирования для трех в Интернете и реагирует».
Я предполагаю, что у вас есть некоторый опыт работы здесь. Мы также сосредотачиваемся на веб -среде. Так что это оставляет нас с:
«рендерер для трех JS в Интернете»
Что такое react рендер?
Рендеры управляют тем, как дерево реагирования превращается в базовые вызовы платформы. – React Docs
Это точное определение, но оно кажется слишком абстрактным, давайте попробуем вместо этого упражнения воображения.
Сначала мне нужно, чтобы ты Представьте себе дерево Анкет Любое дерево работает, попробуйте, например, яблони.
Вы можете думать о своем обычном применении React как об этом дереве. С каждым реагированием. Компонент является ветвью, которая может удерживать один или несколько листьев.
Это дерево само по себе мало что делает, это просто информация. Нам нужно Переместите это дерево где -нибудь Чтобы сделать это полезным, как в браузер.
И мы делаем это с помощью рендерера, более конкретно, реагировать.
Видите ли, React был первоначально создан для браузеров, поэтому все, что написано с React, будет переведено в вызовы DOM API с использованием reactdom Renderer.
Тем не менее, некоторые действительно умные люди в Facebook поняли, что вы можете Переместите это дерево на другие платформы , как и смартфоны, написав другой визуализатор, сфокусированный на этой платформе.
И вот как реагирует натив, и вся концепция рендереры был рожден.
Теперь давайте возьмем это вновь обретенное знание и снова прочитаем официальное определение:
” Рендеры управляют тем, как дерево реагирования превращается в базовые вызовы платформы ».
Разве это не имеет больше смысла сейчас? В конце концов, рендеристы – это машины, которые переводят код React в конкретный API Анкет
React Native делает это для мобильного, React Dom делает это для API DOM, а REACT-FIBER делает это для THER.JS.
Что такое Three.js?
Thre.js – самая популярная библиотека JavaScript 3D с огромным отрывом. У него есть колоссальные 62 -километровые звезды на GitHub и фантастическая витрина проектов, использующих его.
Он работает, обернув ваши браузеры по умолчанию WebGL API в всеобъемлющий набор инструментов и лучших практик. Вот пример этого на работе:
У нас есть проблема, хотя. 3D сложный, поэтому быстрорастущий проект Three.js может стать довольно громоздким.
Весь сделка реагирования с тремя волокнами облегчает развитие и поддержание Three.js API Анкет
И это все на сегодня.
Это серия, где я делюсь всем, что я узнал о React-Fiber, в то время как я учусь!
В следующих постах мы расскажем больше о коде и деталях реализации, но важно сначала рассказать о основаниях.
Увидимся на следующей неделе и следите за следующим эпизодом …
Зона реагирования-тройки 👁
Фотография обложки от Дэвид Беккер на Unsplash
Вопросы и отзывы всегда приветствуются!
Эй, давай подключимся 👋
Следуй за мной в Твиттере И дайте мне знать, что вам понравилась эта статья!
И если ты Действительно понравилось, обязательно поделитесь этим со своими друзьями, это очень поможет мне 😄
Оригинал: “https://dev.to/vtrpldn/the-react-three-fiber-zone-episode-1-52ia”