Angular 1 vs React

Question

我一直在使用Angular 1，现在开始学习React，但无法弄清楚两者之间的主要区别。看起来像React是关于创建组件的，但是我们不能在Angular中使用指令来做同样的事情吗？我仍然处于初学者的反应阶段（通过codechool学习）。

如果有人能够提供一个案例并告诉我如何使用角1来解决它，然后作出反应，这将是非常有益的。

以下是我迄今为止在React中所做的工作（创建一个可以显示Comment组件的评论的CommentBox组件）。例如，我怎么能在角度1中做到这一点，以便我可以看到差异。

CommentBox组件：

class CommentBox extends React.Component { 

    render() { 
    const comments = this._getComments() || []; 

    return(
     <div className="comment-box"> 
     <h3>Comments</h3> 

     <div className="comment-list"> 
      {comments} 
     </div> 
     </div> 
    ); 
    } 



    _getComments() { 
    const commentList = [ 
     { id: 1, author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' }, 
     { id: 2, author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' } 
    ]; 

    return commentList.map((comment) => { 
     return (<Comment 
       author={comment.author} 
       body={comment.body} 
       avatarUrl={comment.avatarUrl} 
       key={comment.id} />); 
    }); 
    } 

} 

注释组件：

class Comment extends React.Component { 

    render() { 

    return(
     <div className="comment"> 
     <img src={this.props.avatarUrl} alt={`${this.props.author}'s picture`} /> 
     <p className="comment-header">{this.props.author}</p> 
     <p className="comment-body"> 
      {this.props.body} 
     </p> 

     </div> 
    ); 
    } 

} 

Answer 1

背景的位我主要是开发商角度但涉足有点用谁使用反应，有朋友在他们的日常工作中大量反应，因此有一些暴露的差异。

从开发人员的角度来看，差异主要在于Angular为您提供了常见前端任务的一些帮助服务，并且具有用于监视数据模型和更新视图（数据绑定）的内置机制，并且具有内置机制用于依赖注入（$注入器）。

React通常会获得更好的性能，因为它具有虚拟内存副本，它首先应用更改，然后将它与以前的虚拟DOM区分开来，以查看需要应用于真实DOM的实际更改，以及那么它会应用这些更改（像读取元素大小的DOM访问代价高昂）。通过动作管理数据模型的流量方式略有不同，通常获得比以角度运行的摘要循环更好的性能，其中所有注册的观察者都被触发以检查其值是否随时发生变化（摘要/应用周期在angular中可以应用于作用域，但$ http调用等的触发器会在$ rootScope上触发它，因此所有来自任何插值的观察者或者在指令中手动设置观察者都必须运行它们的检查函数，以查看该值是否已更改，并执行一个对比）。

角度2+他们采取了VirtualDOM的概念，但我敢肯定，他们最终认为，在他们已经优化摘要或淘汰了更新观察者的旧流程之后，用单向数据流代替它（类似于我收集的通量是如何工作的）。将ng1应用程序升级到ng2或将组件从ng1升级到ng2时，应根据它们在ng-conf中显示的内容，在摘要循环中看到大约7倍的性能增益。你也可以用ng1来编码，以避免在视图中有成千上万的观察者，但这需要花费更多的工作，而不是仅仅做一些天真的事情。在容器

angular.module('myApp', []) 
    .directive('comment', function(){ 
    return { 
     restrict: 'A', //Will match directive name as an attribute <div comment> 
     scope: {commment:'='}, 
     template: `<div className="comment"> 
     <img src="{{comment.avatarUrl}}" alt="{{comment.author}}'s picture" /> 
     <p className="comment-header">{{comment.author}}</p> 
     <p className="comment-body"> 
      {{comment.body}} 
     </p> 

     </div>`, 
    // either use babel for this or typically have the 
    // template in a separate file with a templateURL pointing to it, 
    // could also use the old array.join() way of breaking 
    // the template string across multiple lines 
    } 
    }) 




.directive('commentBox', function(CommentsService){ 
    return { 
     restrict: 'E', //Will match the directive against an element <comment-box></comment-box>, uses camel case to hyphen case from JS->HTML 
     template: `<div comment="commentDatum" ng-repeat="commentDatum in comments"></div>`, 
     link:function(scope){ 
     CommentsService.getComments().then(response => scope.comments = response.data) 
     } 
    } 
    }) 

    .service('CommentService', function($http){ 
    return { 
     getComments:() => $http.get('mysite.com/commentsEndpoint') 
    } 
    }) //I did some half baked ES6 version here but could define a class and use that for the service instead is a bit cleaner but maybe clearer this way that $http is being injected by the framework, the CommentService is also automatically injected into the directive since we list it in the params. 

用法是这样的：

<comment-box></comment-box> 

也是增加你可以使用角度和一起反应，但从来没有尝试过自己，所以不能到如何在现实工作发言。