javascript - 我的 React 组件是否被重新创建而不是更新？

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 以反射(reflect)该更改。看起来每次使用 renderComponent 都会创建一个新的 React 组件，而不是更新一点 DOM。

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() 时，第二个参数是 React 应该将组件渲染到的元素。因此，如果您将同一组件渲染到已包含已安装组件实例的 dom 元素，并且不会重新安装整个组件，它只会更新组件的属性，因此 React 会发出通知。

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

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