Question

我目前正在改变Angular routing＆amp; amp;客户端渲染到React＆amp;用于同构构建的通量。我刚刚开始学习React，所以请耐心等待。

这是我的问题。要呈现一个简单的列表，它看起来就像这样。

HTML，组件＆amp;在React中渲染：

<!--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 v Angular辩论。相反，我想知道是否有办法结合两者的最佳属性？即使是来自React的有状态组件概念，而不是在JSX中使用原始javascript，而是使用Angular＆＃39; ng-repeat之类的东西。如果没有，是否有另一种方法可以在我的示例中编写JSX？

Answer 1

恕我直言，React代码更好，更具可读性，因为它只是javascript。它不需要（几乎）任何额外的知识来理解正在发生的事情。你读到有角度的一个，如果你对角度不熟悉，你会立刻想知道：什么是范围？什么是应用程序？什么是控制器呢？为什么我传递一个数组，为什么第二个参数是一个函数？什么叫这个功能？什么是重复？这个清单继续......

现在，问你的问题：不。

你写的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函数来呈现项目将使这更加面向未来（和可读的IMO）。此外，您不应将key作为项目本身，因为（在此示例中）会阻止两个项目具有相同的值（即两个“Apple”）

似乎也许你真正要问的是，“角度指令很酷！为什么没有反应有指令？我可以/应该向React添加指令吗？”

如果我要解决这个问题，我会说......指令在角度上看起来很酷。虽然，显然它们有一些很大的问题，即使是有角度的团队也会在角度2中抛弃它们（无论如何都是自定义的）。现在github上有一些反应库，它们向JSX添加类似ng的指令，但我强烈反对它。这真是个坏主意。我要重复这个以获得双重超级清晰度：这是一个坏主意。编写普通的旧javascript并使用JSX把手呈现它有什么问题？你真的需要一个ng-repeat，因为写list.map太难了吗？增加的复杂性和学习曲线，无论多么微小，远远超过了好处。 render()是一个美丽的纯函数，让我们这样离开。

Answer 2

您可以使用https://github.com/bcherny/ngimport实际操作Angular和React。我们在10k文件混合Angular + React项目中成功使用它 - 让我知道我是否可以回答任何问题！

Angular＆amp;组合反应精简

2 个答案: