ngReact：watch-depth 属性类型解释

Question

最近我发现了一个很棒的库，它允许在 Angular 应用程序中使用 React 组件，称为 ngReact

我的问题是关于可以在 reactDirective 组件上声明的 watch-depth 属性：

<body ng-app="app">
  <div ng-controller="helloController">
    <hello-component watch-depth="reference" fname="person.fname" lname="person.lname"></hello-component>
  </div>
</body>

查看 reactDirective service 的 ngReact 文档，我发现 watch-depth:

有 3 个可能的值

参考
Collection
值

在我最初使用 ngReact 的探索中，我一直坚持使用默认的 value 选项。

我的问题是，这些类型之间有什么区别？

每个 watch-depth 类型何时适合使用的简单示例会很棒！

Answer 1

答案与 angular 的 $watch 的工作原理有关。 angular 有 3 种方式应用 $watch：参考、Collection、值（正如你已经提到的）。

参考：

Reference 查看值的引用，并且仅在该引用发生变化时才注册更改（并导致重新呈现）。这是最便宜的手表类型。参考更改示例：

$scope.userArray = newUserArray

Collection:

watch-depth of Collection 更深入。它将查看 collection 内部。如果 Watch By Reference 被触发，或者如果在 collection.

中添加、删除或重新排序新项目，它将注册更改。

$scope.userArray.push(newUser);

值：

一个watch-depth的价值是最贵的。它将监视 collection 内的值。如果 Watch By Reference 被触发，如果 Watch By Collection 被触发，或者如果 collection 中的值发生变化，它将注册一个更改。

$scope.userArray[0].age = 32;

这个答案很大程度上受到了 Tero Parviainen 写的一篇优秀文章的启发， https://teropa.info/blog/2014/01/26/the-three-watch-depths-of-angularjs.html

ngReact：watch-depth 属性类型解释

ngReact: watch-depth attribute types explained

angularjs

reactjs

ngreact