Angular & React与streamline的组合

Question

我目前正在从Angular routing &client端渲染到React & Flux进行同构构建的更改。我刚刚开始学习React，所以请耐心点。

这就是我的问题。要呈现一个简单的列表，它应该如下所示。

在React中使用HTML、组件和渲染：

<!--html-->
<div id="mount-point"></div>

<script type="text/jsx">
  //component
  var List = React.createClass({
    getInitialState: function(){
       return {
         items: [
           "Apples",
           "Broccoli",
           "Chicken",
           "Duck",
           "Eggs",
           "Fish",
           "Granola",
           "Hash Browns"
         ]
       }
    },
    render: function(){
      return (
        <ul>
        {
          this.state.items.map(function(item) {
            return <li key={item}>{item}</li>
          })
         }
        </ul>
      )  
    }
  });

  //render
  React.render(<List/>, document.getElementById('mount-point'));
</script>

或者在Angular中，使用控制器和HTML：

<script>
  //controller
  app.controller("MyController", ["$scope", function($scope){ 
    $scope.items = [
       "Apples",
       "Broccoli",
       "Chicken",
       "Duck",
       "Eggs",
       "Fish",
       "Granola",
       "Hash Browns"
     ]
  }]);
</script>

<!--html-->
<ul>
  <li ng-repeat="item in items">{{item}}</li>
</ul>

现在对我来说，Angular代码看起来要短得多，可读性也更好。注入数据的HTML不会被javascript代码渗透。我并不是要挑起一场关于React和Angular的辩论。相反，我想知道是否有一种方法可以将两者的最佳属性结合起来？也就是说，使用React中的有状态组件概念，而不是在JSX中使用原始javascript，而是使用类似Angular的ng-repeat。如果不是，有没有其他方法可以在我的示例中编写JSX？

Answer 1

我的意思是，React代码更好，可读性更好，因为它只是javascript。它不需要(几乎)任何额外的知识就能理解发生了什么。如果你读过angular，如果你对angular一点也不熟悉，你会立刻想知道:什么是$scope？什么是app？控制器是做什么的？为什么我要向它传递一个数组，为什么第二个参数是一个函数？什么调用了这个函数？什么是ng-repeat？这个清单还在继续..。

现在，让我们来回答你的问题:不。

您编写的JSX非常完美(嗯，在某种程度上，我将在下面添加我的修改)。为什么它是完美的？它是完美的，因为地球上几乎所有的程序员都能搞清楚它的用途:它映射到一个项目列表上。

现在，如果我要重写它，我会这样做：

var List = React.createClass({

    ...

    renderItem: function(item, key) {
        return <li key={key}>{item}</li>;
    },

    render: function() {
        return <ul>{this.state.items.map(this.renderItem)}</ul>;
    }
}

创建一个单独的renderItem函数来呈现该项目将使其更具前瞻性(以及可读性)。此外，你不应该把你的key作为项目本身，因为(在这个例子中)这会阻止两个项目具有相同的值(即两个“苹果”)

似乎你真正想问的是，“angular中的指令很酷！为什么react没有指令?我可以/应该添加指令来反应吗？”

如果我要解决这个问题，我会说...指令在angular中看起来确实很酷。尽管，它们显然有一些大问题，甚至angular团队在angular 2中也放弃了它们(无论如何都是自定义的)。github上现在到处都有一些react库，它们向JSX添加了类似ng的指令，但我强烈建议不要这样做。这真的是个坏主意。为了更加清晰，我将重复这一点:这不是一个好主意。编写普通的旧式javascript并使用JSX handlebars呈现它有什么错？因为编写list.map太难了，你真的需要一个ng-repeat吗？增加的复杂性和学习曲线，无论多么微小，都远远超过了好处。render()是一个漂亮的纯函数，就让它这样吧。

Answer 2

实际上，您可以使用https://github.com/bcherny/ngimport来互操作Angular和React。我们已经成功地在一个10k文件的混合Angular+React项目中使用了它--如果我能回答任何问题，请告诉我！