Ладно, это модное вступление, но… Надеюсь, у меня были эти концепции, когда я переходил с Angular на React. Что-то подобное сделает переход с Angular на React более простым и эффективным. Давайте начнем.
Компоненты «родитель-потомок», обменивающиеся данными
Угловой
Angular предоставляет два основных способа обмена данными между компонентами:
@Input()
— для передачи данных от родительского компонента к дочернему компоненту@Output()
и EventEmitter — для передачи данных от дочернего компонента к родительскому.
Использование @Input()
Декоратор @Input()
позволяет дочернему компоненту получать данные от родительского компонента.
В шаблоне родительского компонента вы передаете данные дочернему компоненту с помощью привязки свойств:
<app-child [childData]="parentData"></app-child>
В дочернем компоненте вы определяете свойство @Input()
для получения данных:
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent { @Input() childData: string; }
Когда родительский элемент передает данные с использованием привязки свойства, Angular свяжет их со свойством childData
в дочернем компоненте.
Затем вы можете использовать {{ childData }}
в шаблоне дочернего компонента для доступа к данным.
Использование @Output() и EventEmitter
Чтобы передать данные из дочернего компонента его родительскому компоненту, мы используем:
@Output()
декоратор- Класс EventEmitter
Сначала определите свойство @Output()
, которое генерирует событие:
@Output() childEvent = new EventEmitter<any>();
Затем вызовите emit()
на EventEmitter
, чтобы создать событие и передать данные:
this.childEvent.emit(data);
в шаблоне родительского компонента вы прослушиваете это событие:
<app-child (childEvent)="someParentMethod($event)"></app-child>
И определите метод для обработки созданного события:
someParentMethod(data) { // use data emitted from child here }
Условный рендеринг и циклические элементы
Угловой
В angular вы используете так называемые директивы для условного рендеринга, цикл по элементам html, условное оформление и так далее.
Условный рендеринг: вы используете «ngIf={condition}» для рендеринга элемента. Если условие истинно, элемент будет визуализирован, если нет, элемент не будет визуализирован.
Цикл по элементам Html: вы используете «ngFor={let переменную массива}», чтобы создать цикл для создания повторяющихся элементов. Переменная будет содержать элемент массива, как в функции forEach.
Реагировать
В реакции вы используете jsx, который дает вам ощущение обычного js.
Условный рендеринг: вы используете обычное условие, возвращающее элемент html. Например:
<div> {10 > 5 ? <span>The condition is true</span> : <span>The condition is false</span>} </div>
Or
function App() { if (true) { return <span>The condition is true</span> }else { return <span>The condition is false</span> } }
Цикл по элементам Html: вы используете «array.map()» для цикла по массиву и возврата элементов из него. Например:
<div> {array.map( (element) => { return <span>element</span>}) } </div>
Маршрутизатор
Угловой
Angular маршрутизация позволяет переходить от одного представления к другому в приложении Angular. Маршрутизация в Angular определяет навигацию между представлениями и компонентами.
Маршрутизатор Angular состоит из двух основных компонентов:
RouterModule
— Основной компонент маршрутизации, управляющий навигацией между компонентами.Routes
— массив объектов конфигурации маршрута, определяющих способ сопоставления URL-путей с компонентами.
Основные шаги по настройке маршрутизации в Angular:
- Импортируйте
RouterModule
из@angular/router
. - Определите маршруты, используя массив
routes
. Каждый маршрут имеет свойстваpath
иcomponent
. - Добавьте
RouterModule
в массивimports
@NgModule. - Добавьте розетки маршрутизатора в свои шаблоны.
- Перейдите к маршрутам с помощью директивы
routerLink
или службыRouter
.
Например:
import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'products', component: ProductsComponent } ]; @NgModule({ ... imports: [ RouterModule.forRoot(routes) ] }) export class AppModule { } <a routerLink="/products">Products</a> <router-outlet></router-outlet>
Вложенная маршрутизация. Чтобы определить дочерние маршруты, используйте свойство children
в конфигурации маршрута:
const routes: Routes = [ { path: 'products', component: ProductsComponent, children: [ { path: 'new', component: NewProductComponent }, { path: ':id', component: ProductDetailsComponent } ] } ];
Затем вы можете иметь несколько <router-outlet>
s для отображения дочерних маршрутов внутри компонента.
Реагировать
Библиотека React Router — самое популярное решение для маршрутизации для приложений React. Он предоставляет следующие компоненты для реализации маршрутизации:
BrowserRouter
: основной компонент маршрутизатора, который отслеживает URL-адрес в адресной строке браузера.Routes
: Содержит набор изRoute
компонентов.Route
: определяет маршрут, который отображает путь к компоненту.Link
: используется для навигации внутри приложения. Предотвращает поведение браузера по умолчанию при перезагрузке страницы.
Вот пример реализации базовой маршрутизации:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); }
Мы можем перемещаться между маршрутами с помощью компонента Link
:
<nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav>
Мы можем определить динамические маршруты, используя параметры URL:
<Route path="/user/:id" element={<User />} />
И получите доступ к параметрам компонента с помощью хука useParams
:
const { id } = useParams();
Мы также можем вкладывать маршруты внутри компонентов и определять маршруты в методе render()
компонента.
Вот и все.
Заключение
Это некоторые концепции angular и реакции, а также сравнение методов. Эта статья была написана с помощью искусственного интеллекта. Почему? Чтобы подготовиться к моим следующим статьям о том, как использовать его для обучения.
Спасибо за чтение.