Если вы ищете быстрый ответ о том, как делать в Angular, хотя вы больше знакомы с React, вот список подсказок.

Мотивация перехода с React на Angular в моем случае в основном связана с созданием продуктов с перекрестными различиями библиотек веб-компонентов и технических стеков, до сих пор Angular, похоже, лучше поддерживает вывод веб-компонентов и других функций, ориентированных на будущее. Если у вас есть другая причина расширить свою территорию до Angular, это может быть полезно.

На основе React 16 и Angular 7.

Компонент

Все продумывает Компонент. Они могут быть организованы в иерархическую структуру в JSX, не все из них отображаются в DOM.

Угловой: каждый компонент находится в элементе DOM, но есть директива и служба, а другие вещи могут выполнять различные визуальные или абстрактные логические задачи. (Компонент Angular должен быть перенесен в веб-компонент, просто не думайте, что все в компонентах).

Реквизит

Угловой: аннотация @Input («propName») для свойства компонента или функции установки.

«Prop.children»

Angular: использование синтаксиса шаблона ‹ng-content› для получения проецируемого содержимого шаблона внутри компонента.

Состояния и setState ()

Angular: просто свойство компонента или класса direcitve, ngZone (zone.js) заботится об этом, не требуется явный вызов функции, такой как setState () (в режиме обнаружения изменений по умолчанию)

Поднятие состояния вверх

Угловой: @Ouput () в свойстве EventEmitter или с помощью RxJS.

Условный рендеринг

Angular: создание новой или использование существующей структурной директивы, такой как ngIf, ngSwitch

Жизненный цикл компонента

Угловой: ngAfterViewInit (), ngOnDestroy (), ngOnChangee (), ngDoCheck ()…

Контекст

Angular : Внедрение зависимостей, сервисы.

Разделение кода (React.lazy)

Angular : модули с отложенной загрузкой (асинхронная маршрутизация), angular cli использует Webpack, поэтому эти import () и require.ensure () также должны Работа.

Ссылки, React.createRef ()

Angular: получить ссылочную переменную шаблона, компонента или элемента с помощью @ViewChild (), получить ссылку на проецируемый контент с помощью @ContentChild ()

Границы ошибки

(Ни в асинхронном режиме, ни в обработке событий)

Angular: вы можете переопределить обработку ошибок по умолчанию, предоставив настраиваемый класс, который расширяет ErrorHandler из @ agular / core.

И ngZone (zone.js) в конечном итоге обнаруживает ошибки во всех асинхронных обработчиках событий.

Фрагменты

Angular: синтаксис шаблона ‹ng-container›

PureComponent, shouldComponentUpdate () для настройки производительности

Угловой: подход A. Используйте ChangeDetectionStrategy.OnPush для аннотации компонента, обязательно вызовите ChangeDetectorRef.markForCheck (), чтобы запросить обнаружение изменений

Или подойдите к B:

Частично отключите ngZone, настроив zone-flags.ts, обязательно вызовите ChangeDetectorRef.detectChanges () при некоторой обработке обратного вызова, например requestAnimationFrame

Порталы

Angular: используйте DomPortalOutlet из @ angular / cdk / portal, который является частью библиотеки Angular Material. Или вызовите вручную ViewContainerRef.createEmbeddedView () и Renderer2.appendChild () для визуализации шаблона вне дерева DOM приложения.

ReactDOMServer и Next.js

Angular: @ angular / platform-server и Angular Universal.

Поскольку React основан на идее функции, в то время как Angular больше спроектирован так, чтобы быть стандартным для веб-компонентов и лучше для статического анализа, такого как AOT, поэтому некоторые основные реализации таких концепций, как JSX, Reconciliation, virtual DOM сильно отличаются от таких вещей, как Шаблон, обнаружение изменений и Renderer2 в мире Angular, но служат для той же цели.