结合 Angular 和 React 来简化答案

【问题标题】：Combination of Angular & React to streamline结合 Angular 和 React 来简化
【发布时间】：2015-10-01 23:07:51
【问题描述】：

我目前正在从 Angular 路由和客户端渲染更改为 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 吗？

【问题讨论】：

标签： javascript html angularjs reactjs react-jsx

【解决方案1】：

恕我直言，React 代码更好，更易读，因为它只是 javascript。它不需要（几乎）任何额外的知识来理解正在发生的事情。您阅读了 angular 的文章，如果您对 angular 完全不熟悉，您会立即想知道：$scope 是什么？什么是应用程序？控制器是做什么的？为什么我将它传递给一个数组，为什么第二个参数是一个函数？什么叫这个函数？什么是 ng 重复？这个列表还在继续......

现在，关于你的问题：不。

您编写的 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”）

看起来你真正要问的是，“Angular 中的指令很酷！为什么 react 没有指令？我可以/应该向 React 添加指令吗？”

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

【讨论】：

我认为创建一个单独的 renderItem 函数来渲染项目是多余的，如果你不使用其他地方..
感谢您对此的看法。我同意你所说的大部分内容，尽管我认为你适用于 Angular 的一些相同原则也适用于 React。我可能会在 React 代码中说，state 是什么，getInitialState 做什么以及 render 做什么。我主要关心的是将 HTML 与 javascript 集成得如此之多。我担心这可能会导致简单的布局/样式更改出现问题。
公平地说，状态没有什么特别之处。你甚至不必使用它。它实际上只是一个对象。至于getInitialState，我认为它的作用以及它与state 对象的关系非常明显。但我明白你的意思，当然要学习和理解如何正确使用这些东西需要一些知识。但是 React 是一个非常小而简单的“微”框架，不像单体的 Angular。

【解决方案2】：

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

【讨论】：