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> 

也是增加你可以使用角度和一起反應，但從來沒有嘗試過自己，所以不能到如何在現實工作發言。