javascript - 结合 Angular 和 React 来简化

Question

我目前正在将同构构建的 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 中，使用 Controller 和 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 代码看起来更短、更易读。注入(inject)数据的 HTML 不会被 JavaScript 代码渗透。我并不是想发起 React 与 Angular 的辩论。相反，我想知道是否有一种方法可以结合两者的最佳特性？即具有来自 React 的有状态组件概念，但不是在 JSX 中使用原始 JavaScript，而是使用 Angular 的 ng-repeat 之类的东西。如果没有，是否有另一种方法可以在我的示例中编写 JSX ？

Answer 1

恕我直言，React 代码更好、更具可读性，因为它只是 JavaScript。它不需要(几乎)任何额外的知识来理解正在发生的事情。您阅读了 Angular 的文章，如果您对 Angular 完全不熟悉，您会立即想知道:$scope 是什么？什么是应用程序？ Controller 是做什么的？为什么我向它传递一个数组，为什么第二个参数是一个函数？这个函数叫什么？什么是 ng 重复？这个 list 还在继续......

现在，回答你的问题:不。

您编写的 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 函数来渲染该项目将使该项目更加面向 future (并且在我看来更具可读性)。另外，您不应该将 key 作为项目本身，因为(在本例中)这会阻止两个项目具有相同的值(即两个“Apple”)

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

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