erui _ eruie 002React vs Angular：深度比较

• 它有多成熟？背后是谁？它具有什么样的功能？它采用什么架构，开发范例和模式？周围是什么生态系统？

• 我和我的同事能够轻松学习此工具吗？它适合我的项目吗？开发人员的体验如何？

• 该工具可能有故障且不稳定。供应商可能会意外放弃它。如果您需要帮助，可能没有足够的知识库或社区。

React is developed and maintained by Facebook and used in their own products, including Instagram and WhatsApp. It has been around for around five years now, so it’s not exactly new. It’s also one of the most popular projects on GitHub, with about 119,000 stars at the time of writing. Sounds good to me.

Angular has been around less then React, but it’s not a new kid on the block. It’s maintained by Google and, as mentioned by Igor Minar, used in more than 600 hundred applications in Google such as Firebase Console, Google Analytics, Google Express, Google Cloud Platform and more.

• Dependency injection
• Templates, based on an extended version of HTML
• Routing, provided by

  @angular/router

• Ajax requests using

  @angular/common/http

• @angular/forms

  for building forms
• Component CSS encapsulation
• XSS protection
• Utilities for unit-testing components.

• No dependency injection
• Instead of classic templates, it has JSX, an XML-like language built on top of JavaScript
• State management using

  setState

  and the Context API.
• XSS protection
• Utilities for unit-testing components.

• React-router for routing
• Fetch (or axios) for HTTP requests
• A wide variety of techniques for CSS encapsulation
• Enzyme for additional unit-testing utilities.

ĴSX is a controversial topic for many developers: some enjoy it, and others think that it’s a huge step back. Instead of following a classical approach of separating markup and logic, React decided to combine them within components using an XML-like language that allows you to write markup directly in your JavaScript code.

The situation will change when the hooks proposal is finalized and released. This will allow functional components to have a state and use other features of class components, such as lifecycle hooks. We will then be able to write purely functional React applications.

The concept of state management is important for both frameworks and React has several approaches to offer. Each component can have its own state, so you can use that to create stateful components for holding the state of a part of the application. This is known as the lifting state up pattern. This, however, gets impractical as you need to store global state required in different parts of the application as well as manually pass data around different levels of the component tree. To mitigate this, React 16.3 introduced the Context API that allows you to make data available an all component tree levels without passing it around explicitly. Contexts don’t store the state themselves, they only expose the data, but if you wrap it in a stateful component you can implement a convenient natively supported way to store the state.

There are also third-party libraries for state management in React. Redux is a state management library inspired by Flux, but with some simplifications. The key idea of Redux is that the whole state of the application is represented by a single object, which is mutated by functions called reducers. Reducers themselves are pure functions and are implemented separately from the components. This enables better separation of concerns and testability.

中号obX is an alternative library for managing the state of an application. Instead of keeping the state in a single immutable store, as Redux does, it encourages you to store only the minimal required state and derive the rest from it. It provides a set of decorators to define observables and observers and introduce reactive logic to your state.

• Further reading: How to Manage Your JavaScript Application State with MobX

PropTypes is an optional feature of React that can bring additional safety measures if you’re not using Flow or TypeScript. It allows you to define a set of validators for the props of components that will check their values at runtime. Since React 15.5 prop types have been moved to a separate prop-types library and are now completely optional. Considering its benefits, we advise to use it to improve the reliability of your application.

Flow is a type-checking tool for JavaScript also developed by Facebook. It can parse code and check for common type errors such as implicit casting or null dereferencing.

• Further reading: Writing Better JavaScript with Flow

ŤypeScript is a new language built on top of JavaScript and developed by Microsoft. It’s a superset of JavaScript ES2015 and includes features from newer versions of the language. You can use it instead of Babel to write state of the art JavaScript. It also features an extremely powerful typing system that can statically analyze your code by using a combination of annotations and type inference.

• Further reading: An Introduction to TypeScript: Static Typing for the Web

[RxJS is a reactive programming library that allows for more flexible handling of asynchronous operations and events. It’s a combination of the Observer and Iterator patterns blended together with functional programming. RxJS allows you to treat anything as a continuous stream of values and perform various operations on it such as mapping, filtering, splitting or merging.

The library has been adopted by Angular in their HTTP module as well for some internal use. When you perform an HTTP request, it returns an Observable instead of the usual Promise. This approach opens the door for interesting possibilities, such as the ability to cancel a request, retry it multiple times or work with continuous data steams, such as web sockets. But this is just the surface. To master RxJS, you’ll need to know your way around different types of Observables, Subjects, as well as around a hundred methods and operators.

• Further reading: Introduction to Functional Reactive Programming with RxJS

ñgRx, the most popular state management library for Angular can make things easier. It’s inspired by Redux but also makes use of RxJS to watch and recalculate data in the state. Using NgRx can help you enforce an understandable unidirectional data flow as well as reduce coupling in your code.

ñGXS is another state management library inspired by Redux. In contrast to NgRx, NGXS strives to reduce boilerplate code by using modern TypeScript features and improve the learning curve and overall development experience.

• Further reading: Managing State in Angular Apps with ngrx/store

A popular trend with modern frameworks is having a CLI tool that helps you bootstrap your project without having to configure the build yourself. Angular has Angular CLI for that. It allows you to generate and run a project with just a couple of commands. All of the scripts responsible for building the application, starting a development server and running tests are hidden away from you in

node_modules

. You can also use it to generate new code during development and install dependencies.

Angular introduces an interesting new way of managing dependencies to your project. When using

ng add

you can install a dependency and it will automatically be configured for usage. For example, when you

run ng add @angular/material

, Angular CLI downloads Angular Material from the npm registry and runs its install script that automatically configures your application to use Angular Material. This is done using using Angular schematics. Schematics are a workflow tool that allows the libraries make changes to your code base. This means that the library authors can provide automatic ways of resolving backward-incompattible issues you might face when installing a new version.

• Further reading: The Ultimate Angular CLI Reference

一世onic is a popular framework for developing hybrid mobile applications. It provides a Cordova container that is nicely integrated with Angular and a pretty material component library. Using it, you can easily set up and build a mobile application. If you prefer a hybrid app over a native one, this is a good choice.

If you’re a fan of material design, you’ll be happy to hear that there’s a Material component library available for Angular with a good selection of ready-made components.

一个ngular universal is a project that bundles different tools to enable server-side rendering for Angular applications. It is integrated with Angular CLI and supports a number of Node.js frameworks, such as express and hapi, as well as with .NET core.

Ťhere are plenty of other libraries and tools available in the Awesome Angular list.

Create React App is a CLI utility for React to quickly set up new projects. Similar to Angular CLI it allows you to generate a new project, run the app in development mode or create a production bundle. It uses Jest for unit testing, supports application profiling using environment variables, backend proxies for local development, Flow and TypeScript, Sass, PostCSS, and a number other features.

[React Native is a platform developed by Facebook for creating native mobile applications using React. Unlike Ionic, which produces a hybrid application, React Native produces a truly native UI. It provides a set of standard React components which are bound to their native counterparts. It also allows you to create your own components and bind them to native code written in Objective-C, Java or Swift.

There’s a material design component library available for React as well. Compared to Angular’s version, this one is more mature and has a wider range of components available.

ñext.js is a framework for the server-side rendering of React applications. It provides a flexible way to completely or partially render your application on the server, return the result to the client and continue in the browser. It tries to make the complex task of creating universal applications easier so the set up is designed to be as simple as possible with a minimal amount of new primitives and requirements for the structure of your project.

Ťhere are plenty of other libraries and tools available in the Awesome React list.

Gatsby is a static website generator that uses React.js. It allows you to use GraphQL to query the data for your websites defined in markdown, YAML, JSON, external API’s as well as popular content management systems.

[React 360 is a library for creating virtual reality applications for the browsers. It provides a declarative React API that is built on top the WebGL and WebVR browser APIs thus making it easier to create 360 VR experiences.

[React Dev Tools is a browser extension for debugging React applications that allows you to traverse the React component tree and see their props and state.

The official tutorial is an excellent place to start learning React. Once you’re done with that, get familiar with the router. The React Router v4 might be slightly complex and unconventional, but nothing to worry about. Depending on the size, complexity, and requirements of your project you’ll need to find and learn some additional libraries and this might be the tricky part, but after that everything should be smooth sailing.

The framework itself is rich in topics to learn, starting from basic ones such as modules, dependency injection, decorators, components, services, pipes, templates, and directives, to more advanced topics such as change detection, zones, AoT compilation, and Rx.js. These are all covered in the documentation. Rx.js is a heavy topic on its own and is described in much detail on the official website. While relatively easy to use on a basic level it gets more complicated when moving on to advanced topics.

All in all, we noticed that the entry barrier for Angular is higher than for React. The sheer number of new concepts may be overwhelming to newcomers. And even after you’ve started, the experience might be a bit rough since you need to keep in mind things like Rx.js subscription management, change detection performance and bananas in a box (yes, this is an actual advice from the documentation). We often encountered error messages that are too cryptic to understand, so we had to google them and pray for an exact match.

• 这个项目有多大？它要维持多长时间？是否预先明确定义了所有功能，或者您希望它具有灵活性？如果已经定义了所有功能，则需要什么功能？域模型和业务逻辑是否复杂？您定位到什么平台？ 网络，移动，台式机？您需要服务器端渲染吗？ SEO重要吗？您会处理大量的实时事件流吗？您的团队有多大？您的开发人员的经验如何？他们的背景是什么？您是否要使用任何现成的组件库？

选择了一个项目的框架后，您将很容易为即将进行的项目使用完全相同的技术堆栈。 别。 尽管保持技术堆栈一致是个好主意，但不要每次都盲目使用相同的方法。 在开始每个项目之前，请花一点时间再次回答相同的问题。 也许对于下一个项目，答案会有所不同，或者情况将会改变。 另外，如果您有使用不熟悉的技术堆栈进行小型项目的奢侈行为，那就去吧。 这样的实验将为您提供宝贵的经验。 保持思想开放，从错误中学习。 在某些时候，某种技术会自然而然对。

Ťhis article was peer reviewed by Jurgen Van de Moere and Joan Yin. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

from: https://www.sitepoint.com//react-vs-angular/

dangzhuang7815 原创文章 0获赞 0访问量 295 关注 私信