Javascript 角度1 vs反应

我已经使用Angular 1有一段时间了，现在我开始学习React，但无法找出两者之间的主要区别。看起来React是关于创建组件的，但是我们不能在使用指令时也这样做吗？我仍然处于react的初级阶段（通过代码学校学习）

如果有人能提供一个案例，告诉我如何使用angular 1解决问题，然后做出反应，这将非常有帮助

下面是我到目前为止在React中所做的工作（创建一个CommentBox组件，该组件将显示来自Comment组件的注释）。例如，我如何在角度1中这样做，以便我可以看到差异

评论框组件：

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>
    );
  }

}

class CommentBox扩展了React.Component{
render（）{
const comments=this._getComments（）| |[]；
返回(
评论
{评论}
);
}
_getComments（）{
常量注释列表=[
{id:1，作者：'Clu'，正文：'Just say no to love！'，avatarUrl:'images/default avatar.png'}，
{id:2，作者：'Anne Droid'，正文：'我想知道什么是爱…'，avatarUrl:'images/default avatar.png'}
];
返回commentList.map（（comment）=>{
返回（）；
});
}
}

注释组件：

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>
    );
  }

}

类注释扩展了React.Component{
render（）{
返回(
{this.props.author}

{this.props.body}

);
}
}

一点背景我主要是一个有棱角的开发人员，但也涉足过React，并且有一些朋友在日常工作中大量使用React，所以我有一些不同之处

从开发人员的角度来看，Angular的不同之处似乎主要在于，它为常见的前端任务提供了一些帮助服务，并具有用于监视数据模型和更新视图的内置机制（数据绑定），以及用于依赖项注入的内置机制（$injector）

React通常会获得更好的性能，因为它有一个DOM的虚拟内存副本，它首先将更改应用于该副本，然后将其与以前的虚拟DOM进行比较，以查看需要对真实DOM应用哪些实际更改，然后再应用这些更改（DOM访问，如读取元素大小，成本高昂）。通过操作管理数据模型的flux方法稍有不同，通常比摘要周期获得更好的性能，摘要周期以角度运行，所有注册的观察者在摘要发生时都会被触发以检查其值是否已更改（angular中的digests/apply循环可应用于作用域，但$http调用等的循环会在$rootScope上触发它，因此任何插值的所有观察者或指令中手动设置的观察者都必须运行其检查函数，以查看值是否已更改并进行比较）

Angular 2+他们尝试采用VirtualDOM概念，但我敢肯定，在他们已经优化了摘要或取消了更新观察者的旧流程，并用单向数据流（类似于我收集的flux的工作方式）取代之后，他们最终决定不值得为时间增加复杂性。将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.

angular.module（'myApp'，[]）
.directive（'comment'，function（）{
返回{
restrict:'A'，//将作为属性与指令名匹配
作用域：{commment:'='}，
模板：`
{{comment.author}

{{comment.body}

`,
//可以使用babel，也可以使用
//模板位于一个单独的文件中，模板URL指向该文件，
//也可以使用旧的array.join（）方法中断
//模板字符串跨越多行
}
})
.指令（'commentBox'，函数（CommentsService）{
返回{
restrict:'E'，//将针对元素匹配指令，使用camel大小写从JS->HTML中连字符大小写
模板：``，
链接：功能（范围）{
CommentsService.getComments（）.then（response=>scope.comments=response.data）
}
}
})
.service（'CommentService'，函数（$http）{
返回{
getComments:（）=>$http.get（'mysite.com/commentsEndpoint'）
}
})//我在这里做了一些不成熟的ES6版本，但可以定义一个类并使用它，因为服务更干净，但可能更清晰，因为框架正在注入$http，CommentService也会自动注入到指令中，因为我们在参数中列出了它。

容器中的用法如下所示：

<comment-box></comment-box>

---

另外，您可以同时使用Angular和React，但我自己从未尝试过，因此无法说明它在实际中是如何工作的。

感谢您提供了我提供的Angular版本。因此，React的主要区别似乎在于它提供了虚拟dom。您提供的Angular 1代码看起来更容易进行反应。@user5694093 y是的，它是不同的，但是有一个选择的/已知的路径使用Angular来完成常见的事情。通常你不负责使用Angular做那么多事情，框架似乎有一些更固执己见的内置默认值（主要用于与具有$http或$resource的API通信，以及关于如何处理数据模型和更新视图的事情）。这里有一些折衷，完成最常见的事情比较容易，但如果您意外创建了一个执行非常糟糕的视图，以确定框架正在为您做什么，则可能会变得棘手