Если вы ищете быстрый ответ о том, как делать в 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, но служат для той же цели.