Question

我正在尝试组合Angular和React.js。我有一个工作示例项目here我已经看到了几种将Angular和React.js组合在一起的方法。我看到的方法之一是创建一个指令并在链接函数中创建React组件。例如，在项目的第一部分生成React版本（红色）我正在使用

.directive('reactElementRepeater', function() {
    return {
      link: function(scope, element) {
        var update_react = function(oldVal, newVal){ //Called every time one of the two values change
          React.renderComponent(Demo_Element({
            numberOfElements: scope.myModel.numberOfElem, 
            numberInElements: scope.myModel.numberInElem
          }), element[0]);
        }
        scope.$watch('myModel.numberOfElem.length', update_react);
        scope.$watch('myModel.numberInElem', update_react);
      }
    }
  });

我想要的以及在启用React的应用程序中应该发生什么，是为了更新模型中的某些内容，然后通过React发送更新，它将尽可能少地改变DOM以反映该更改。它看起来不是更新DOM的一部分，而是每次使用renderComponent创建一个新的React组件。

React.renderComponent() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

每次都在重新创建元素吗？如果是这种情况，是否有办法改变这种情况，以免发生？为了清楚我知道ngReact，我只是想知道用React加速Angular的其他方法。

Answer 1

是的，这很好，它没有多次安装组件。

当你调用React.renderComponent()时，第二个参数是反应应该将组件渲染到的元素。因此，如果要将相同的组件呈现给已包含组件的已安装实例的dom元素，并且不重新安装整个组件，则只需更新它的属性即可做出反应。

如果您创建一个定义了componentDidMount函数的组件，您可以看到这一点。您会注意到componentDidMount只会在第一次调用renderComponent时执行。然后，在同一目标dom元素上对renderComponent的后续调用将不会调用它，因为该组件已经安装。同样，getDefaultState和getDefaultProps也只会在第一次renderComponent来电时被调用。

如果您要求每次答案为是时都会调用组件的render功能。但这就是反应如何工作，你希望调用render函数，因为道具可能已经改变了。您可以使用shouldComponentUpdate（http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate）阻止它被调用并返回false。但是反应开发人员建议你不要使用它来阻止渲染调用，除非你有特定的性能问题 - 大多数情况下，只要让渲染调用执行就好了，因为它不会导致任何缓慢的dom更新，除非事情已经实际改变。

我的React组件是重新创建而不是更新？

1 个答案: