react 圆角
JavaScript being the language of the web, has new frameworks and libraries developed frequently, take it or not there has always been an influence on web developers to be in the race to learn, innovate and contribute to this wonderful growing community.
JavaScript是Web的语言，它经常开发新的框架和库，无论是否采用它，一直影响着Web开发人员竞相学习，创新并为这个日益壮大的社区做出贡献。
If you are an Angular developer and want to explore React or vice versa, you are at the right place. We will be here using our knowledge of Angular or React, whichever you are comfortable with, to learn the equal other.
如果您是Angular开发人员，并且想探索React，反之亦然，那么您来对地方了。 无论您喜欢哪种方式，我们都会在这里使用我们对Angular或React的知识来学习平等。
In this blog, we will take up a few fundamental concepts, and understand how Angular/React can be used to achieve them, through flowcharts/diagrams. Compare these flowcharts, derive a basic understanding about the idea that these JavaScript products are trying to promote, then, discover more, open an online IDE (codeSandbox etc,) start experimenting!
在本博客中，我们将介绍一些基本概念，并通过流程图/图表了解如何使用Angular / React实现这些概念。 比较这些流程图，对这些JavaScript产品试图推广的想法有基本的了解，然后发现更多内容，打开在线IDE(codeSandbox等)，开始尝试！
Angular is a framework, a complete solution in itself providing us an environment where we can jump in and start building our application, developed and maintained by Google.
Angular是一个框架 ，本身就是一个完整的解决方案，为我们提供了一个环境，我们可以在其中进入并开始构建由Google开发和维护的应用程序。
React is a library, where you start raw and keep adding the tools as and when or how you need them, developed and maintained by Facebook.
React是一个库 ，您可以从这里开始原始工作，并在需要的时候，由Facebook不断开发和维护工具，并不断添加它们。
1.组成部分 (1. Component)
A typical angular application is made of modules, which act like containers to hold related code/functionality, a module in turn consists of components, services etc.
典型的角度应用程序由模块组成 ，这些模块的作用就像容器一样，用于保存相关的代码/功能，而模块又由组件，服务等组成。
An angular application has at least one module. In a given module file we can declare components which are a part of that module or import/export components from other modules. So basically modules organise our application code and determine the scope of our components.
角度应用程序具有至少一个模块。 在给定的模块文件中，我们可以声明属于该模块的组件或从其他模块导入/导出组件。 因此，基本上，模块会组织我们的应用程序代码并确定组件的范围。
As shown an angular component usually consists of a typescript file where all the businesses logic goes, also taking a config object which defines the .html and .css files in its scope, on which the business logic is applied.
如图所示，角度组件通常由所有业务逻辑所在的打字稿文件组成，还包含一个配置对象，该对象在其范围内定义了应用业务逻辑的.html和.css文件。
However, as shown below, a react component is simply a JS file and react uses a syntactic sugar JSX that allows us to write HTML code in our JS files. If you want to use one component in another just import the corresponding JS file that exports the component as a class or a simple function.
但是，如下所示，react组件只是一个JS文件，而react使用语法糖JSX允许我们在JS文件中编写HTML代码。 如果要在另一个组件中使用一个组件，只需导入相应的JS文件即可将该组件导出为类或简单函数。
2.亲子交流 (2. Parent child component communication)
In both Angular and React we design web pages in terms of components which often have a parent child relation, communicating between these components is important.
在Angular和React中，我们都是根据通常具有父子关系的组件来设计网页，这些组件之间的通信很重要。
Angular provides @Input() to pass data from parent to child as a simple property and data from child to parent is communicated via a @Output() event emitter, the diagram shows how a property ‘value’ is passed from parent to child and how a button click in child component triggers the ‘onClickHandler()’ method in the parent.
Angular提供@Input()作为简单属性将数据从父级传递到子级，并且通过@Output()事件发射器将数据从子级传递给父级，该图显示了如何将属性“值”从父级传递给子级，子组件中的按钮单击如何触发父组件中的“ onClickHandler()”方法。
Where as react simply stores all the data exposed as properties/attributes by the parent component in a variable called ‘props’, the diagram shows how a child can access the parent data using props.
在as react仅将父组件暴露为属性/属性的所有数据存储在名为“ props ”的变量中的情况下，该图显示了子代如何使用props访问父数据。
Child to parent communication is usually achieved by passing a call back method from the parent that the child will call when a user interaction happens, the diagram below also shows how on clicking a button in child the method ‘onClickHandler()’ is called in the parent.
子级与父级之间的通信通常是通过传递父级的回调方法来实现的，该方法将在用户交互发生时由子级调用。下图还显示了如何在单击子级中的按钮时在方法中调用“ onClickHandler()”方法。父母
3.条件DOM元素 (3. Conditional DOM elements)
Conditional DOM manipulation, which includes adding, removing, manipulating elements in the DOM is a very important feature in just any app.
在任何应用程序中，条件DOM操作(包括在DOM中添加，删除，操作元素)都是非常重要的功能。
Angular makes this very simple by providing us structural directives such as *ngIf , *ngFor etc, as shown, which when applied on the host element performs the necessary operations on the element itself and its descendants.
Angular通过向我们提供结构指令(如* ngIf ， * ngFor等)使这一过程变得非常简单，如图所示，将其应用于宿主元素时会对元素本身及其后代执行必要的操作。
React on the other hand simply achieves this using JS, as shown below a simple ‘if’ can be performed using a ternary operator and an iterative loop can be achieved using JS array operators like map on the HTML elements. Again, this is possible because react allows us to write our HTML code with JS using JSX.
另一方面，React只需使用JS即可实现，如下所示，可以使用三元运算符执行简单的“ if”，而使用JS数组运算符(如HTML元素上的map)可以实现迭代循环。 同样，这是可能的，因为react允许我们使用JSX用JS编写HTML代码。
4.数据绑定 (4. Data binding)
Data binding is a method of exchanging the data between the view(HTML) and the data model.
数据绑定是一种在视图(HTML)和数据模型之间交换数据的方法。
Angular uses a two-way binding approach, this is easily made possible using the [(ngModel)] directive as shown, any change in the view is immediately updated in the data model and vice versa.
Angular使用双向绑定方法，使用如图所示的[[ngModel)]指令很容易做到这一点，视图中的任何更改都会在数据模型中立即更新，反之亦然。
Where as, React follows a one-way approach, which means changes from the data model are immediately updated in the view using { } braces, while the changes from the view should be manually updated in the data model by using callbacks or state management libraries as shown below.
相反，React采用一种单向方法，这意味着对数据模型的更改将使用{}大括号立即在视图中进行更新，而视图中的更改应通过使用回调或状态管理库在数据模型中进行手动更新。如下所示。
Of course there is more code in React compared to Angular for achieving two way data binding, but by doing this react provides us more control over our data, HTML here as you see in the above diagram can only raise events, any change in data model has to be done in a React component method, the main idea here is to have a single source of change and follow the changes as it happens in the component hierarchy, making the application less error prone and debugging easy.
当然，与Angular相比，React中有更多代码可实现两种方式的数据绑定，但是通过执行React，我们可以更好地控制数据，如上图所示，此处HTML只能引发事件，数据模型中的任何变化必须在React组件方法中完成，这里的主要思想是拥有单个更改源，并按照组件层次结构中发生的更改进行更改，从而使应用程序更易于出错，并且调试起来也很容易。
5.国家管理 (5. State management)
As our application grows, be it Angular or React, the components need an organised method to access and alter the data flow in the application, that is when state management becomes very important.
随着我们的应用程序(无论是Angular还是React)的增长，组件需要一种有组织的方法来访问和更改应用程序中的数据流，也就是说，状态管理变得非常重要。
In Angular, components with parent-child relationship can communicate using @Input() @Output(), as discussed earlier. Service providers, NgRx stores are some of the other useful component communication methods available. Refer to state management options in Angular for a detailed explanation.
在Angular中，具有父子关系的组件可以使用@Input()@Output()进行通信，如前所述。 服务提供商， NgRx存储是可用的其他一些有用的组件通信方法。 请参阅Angular中的状态管理选项 详细解释。
React components on the other hand can mainly use props or state features available internally to manage the component communication/state within the application. However, also check how Redux, a very popular and an efficient state management library, can be easily connected with React, to manage the complex state as the application grows.
另一方面，React组件可以主要使用内部可用的道具或状态功能来管理应用程序内的组件通信/状态。 但是，还要检查 Redux 是一个非常流行且高效的状态管理库，可以轻松地与React相连 ，以随着应用程序的增长管理复杂的状态。
Remember,
记得，
Having a knowledge on both of these JavaScript advancements, Angular and React, and adapting to the one which suits our requirement is what we should aim at doing. Where as, trying to conclude which one of these is an ultimate efficient JavaScript product, is a myth!
了解Angular和React这两个JavaScript改进，并适应于我们的要求是我们的目标。 因此，试图得出结论之一就是最终的高效JavaScript产品是一个神话！
翻译自: https://medium.com/@harshitamanglym/angular-vs-and-react-959880c57790
react 圆角
扫一扫
8350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
