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讨论了一些问题，并且让朋友们在日常工作中大量使用React，因此可以接触到差异。

与开发人员的观点不同似乎主要是Angular为常见的前端任务提供了一些辅助服务，并且具有用于监视数据模型和更新视图（数据绑定）的内置机制，并具有内置的机制依赖注入（$ injector）。

React通常会获得更好的性能，因为它具有应用更改的DOM的虚拟内存副本，然后将其与先前的虚拟DOM进行区分，以查看需要将哪些实际更改应用于真实DOM，然后它应用了这些更改（DOM访问，如读取元素的大小是昂贵的）。通过动作管理数据模型的流量方式略有不同，并且通常比以角度运行的摘要周期获得更好的性能，其中所有注册的观察者被触发以检查他们的值在消化发生的任何时间是否已经改变（摘要/应用周期） in angular可以应用于范围，但来自$ http调用等的触发器会在$ rootScope上触发它，因此所有来自任何插值的观察者或在指令中手动设置观察者必须运行其检查功能以查看值是否已更改并执行比较）。

Angular 2+他们采用VirtualDOM概念，但我很确定他们最终决定在他们已经优化摘要或消除旧流程之后，不值得时间增益的复杂性。更新观察者并用单向数据流替换它（类似于我收集的通量如何工作）。将ng1应用程序升级到ng2或将组件从ng1升级到ng2应该会在摘要周期中看到大约7倍的性能提升，这取决于它们在ng-conf中显示的内容。您还可以在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>

另外，你可以一起使用Angular和React但是我自己从未尝试过，所以不能说实际上它是如何工作的。

Angular 1 vs React

1 个答案: