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

Question

我试图结合Angular和React.js.我在这里有一个工作示例项目我已经看到了几种将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()实例化根组件,启动框架,并将标记注入原始DOM元素,作为第二个参数提供.

它实际上每次都在重新创建元素吗？如果是这种情况,是否有办法改变这种情况,以免发生？为了清楚我知道ngReact,我只是想知道其他方法来加速Angular与React.

Answer 1

是的,这很好,它不是多次安装组件.

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

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

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