Пример React и A-Frame
Вызов
Поскольку такие фреймворки, как React, Vue и Angular, содержат все больше и больше бизнес-логики, используемой в современных приложениях, возможности более эффективного использования технологий партнеров по экосистеме часто упускаются впустую. Односторонняя привязка, практикуемая во многих реализациях, создает ситуации, в которых может потребоваться перерисовка всего стороннего компонента, а не использование его собственной логики для улучшения взаимодействия с пользователем. Задача разработчика состоит в том, чтобы найти передовой опыт в библиотеках компонентов, учитывающий эффективность каждой библиотеки.
Пример
Каждая из доминирующих хост-платформ имеет свою собственную экосистему проприетарных библиотек и процессов, а также другие, более открытые и агностические. Эти дочерние фреймворки и сторонние библиотеки, такие как AFrame или D3, часто имеют свои собственные модели событий и состояний. Когда речь идет о взаимодействии с пользователем, сторонние библиотеки также имеют оптимизированные способы реагирования. Однако, если ответ в сторонней библиотеке инициирует перезагрузку самого представления из-за настройки в основной структуре, преимущества дизайна и возможностей библиотеки могут никогда не быть реализованы.
Мы будем использовать простой JSON, хотя его можно легко получить из магазина или сетевого вызова. Прежде чем мы перейдем к фактическому коду, давайте взглянем на высокоуровневый взгляд на интеграцию хост-фреймворка, названного здесь externallibrary, с дочерним фреймворком, childlibrary. В приведенном ниже коде мы видим, что компонент из внешней библиотеки содержит компонент из дочерней библиотеки. Мы также можем видеть, что данные от основного компонента передаются через атрибут дочернему компоненту. Эти данные будут отображаться в дочерней структуре в соответствии с ее правилами.
import { Component1, View1 } from ‘outerlibrary’
import { Component2 } from ‘childlibrary’
class ContentPage extends Component1 {
render(){
return(
<View1>
<Component2 fromParent={this.props} />
</View1>
)
}
Значение полезности становится очевидным, когда структура в Компоненте 2 требует дополнительной структуры из Компонента 1. Если мы представим, что Component2 может содержать ряд структур, которые могут извлечь выгоду из бизнес-логики обеих платформ, например, данные из хранилища, созданного или затронутого хостом, и обработка этих данных в компоненте более высокого порядка с дочерними элементами. элементы в любой структуре, становится очевидной потребность в методологии процесса.
Межкомпонентный дизайн: React и Aframe
В приведенном здесь примере мы будем использовать react в качестве хост-фреймворка, а a-frame будет дочерним фреймворком. Каждый фреймворк имеет свои лучшие практики и рекомендации по разработке, которых мы будем придерживаться как можно точнее. Мы начнем с создания минимального приложения с помощью create-react-app (CRA).
В то время как рендеринг на стороне сервера и создатели приложений для статического сайта, такие как gatsby и next, все чаще рассматриваются как основа для перехода к приложениям React, мы будем использовать npx с CRA здесь для простоты. Использование npx аналогично установке npm, за исключением того, что код выполняется сразу после установки. Убедитесь, что в вашей системе установлены текущий узел и npx. В командной строке создайте реагирующее приложение с именем «react-aframe-demo», а затем войдите в созданный вами каталог и добавьте фрейм, используя пряжу или npm.
npx create-react-app react-aframe-demo cd react-aframe-demo yarn add aframe
Файл реакции app.js, компонент основной платформы (HFC), будет отредактирован, чтобы включить элемент a-frame в качестве дочернего компонента платформы (CFC). Последний будет создан контентом, отправляемым через компонент реакции с именем Aframed его дочерним компонентам компонента a-frame. Он будет передавать контент в кадр через параметры реквизита. Библиотеку aframe необходимо только объявить в App.js, после чего на ее компоненты можно будет ссылаться в других компонентах React, таких как Aframed и ChildObjectContainer. Такие элементы, как a-entity и a-sphere, доступны для всех последующих компонентов React.
App.js
class App extends React.Component {
assetsArg(){
return (
<a-assets>
<img alt=”” id=”skyTexture” crossOrigin=”anonymous”
src=”assets/eclipse.png” />
</a-assets>
);
}
entitiesArg(){
return (
<a-entity>
<a-box position=”-1 0.5 -3" rotation=”0 45 0" color=”#4CC3D9" />
<a-sphere position=”0 1.25 -5" radius=”1.25" color=”#fef25E” />
<ChildObjectContainer type=”typeA” />
<ChildObjectContainer type=”typeB” asset=”#skyTexture” />
<Aframed2 type=”cylinder” />
<Aframed3 />
</a-entity>
);
}
render() {
return (
<div className=”App”>
<header className=”App-header”>
<h1>AFrame within React </h1>
</header>
<Aframed
assets={this.assetsArg()}
entities={this.entitiesArg()} />
</div>
);
}
}
Ресурсы a-frame поступают из функции assetsArg в App.js, передаются через параметр assets в Aframed.js, за которым следует параметр entity, заполняемый функцией entityArg. В React созданы четыре элемента, чтобы продемонстрировать следующее:
- Aframed.js — это компонент реагирования, который экспортирует фрейм и иерархию реагирования;
- Aframed2.js демонстрирует реквизиты и внедрение статических переменных из компонента без состояния реакции в фрейм;
- Aframed3.js предоставляет мост функции чистой реакции для a-frame;
- ChildObjectContainer.js предоставляет шлюз бизнес-логики между реакцией и фреймом.
Aframed.js
class Aframed extends React.Component {
localStyle = () => (
{width:’80vw’,height:’40vh’,margin:’2vh 10vw’}
);
render() {
return (
<a-scene embedded style={this.localStyle()}>
{ this.props.assets }
{ this.props.entities }
<a-sky color=”blue” />
</a-scene>
);
}
}
Aframed2.js
class Aframed2 extends React.PureComponent {
render() {
const theProp = `primitive: ${this.props.type}`
const thePosition = `1 0.75 -3`;
return (
<a-entity geometry={theProp} position={thePosition} radius=”0.5" height=”3.5" color=”#c00" />
);
}
}
Aframed3.js
const aframedArgs = {
position:’0 0 -4',
rotation:’-90 0 0',
width: 8,
height: 4,
color: “#FF7673”
};
const Aframed3 = () => <a-plane { …aframedArgs } />;
Каждый из них относительно прост, но последствия интеграции структур компонентов заключаются в том, что можно рассматривать компоненты в гибридной манере: лучшее из обоих миров. Знание того, что вы можете создавать дополнительные элементы в дочерней платформе из основной платформы, позволяет вам рассматривать элемент как член первого класса любой платформы. Разработчику надлежит ознакомиться с тонкостями каждого из них и понять, что многое из того, что может быть найдено или воображено, может быть получено в результате процесса создания и обнаружения, а не копирования существующих примеров.
Упомянутый здесь код можно найти по следующему URL-адресу:
