什么是Angular的“单向数据流规则”?

时间:2017-03-06 20:21:39

标签: angular

Angular的“单向数据流规则”被提到several times in the docs但是Angular文档没有明确说明(强调明确定义单向数据流规则。

以下是我对单向数据流规则的明确定义所能找到的最接近的内容:

来自this page

  

Angular的单向数据流规则禁止在视图编写后对视图进行更新。

足够公平,但对于一个观点来说,它究竟意味着什么?什么构成对视图的更新?我们不是一直在更新观看次数吗?

来自this page

  

一个重要的断言[enableProdMode]禁用验证更改检测传递不会导致对任何绑定的其他更改(也称为单向数据流)。

我必须非常缓慢地阅读这句话大约8次,但我仍然没有得到它。当它说“也称为单向数据流”时,我假设也称为单向数据流的是“更改检测通过不会导致对任何绑定的额外更改”。好吧,也许我们越来越近了。虽然相当抽象。一个例子怎么样?

这两个相当不透明的模糊都是Angular文档显然让我们关注单向数据流规则。似乎不够。

任何人都可以更清楚地向我解释,最好是我非常愚蠢吗?

修改:我在this page找到了可能是第三条线索:

  

模板表达式不应更改目标属性值以外的任何应用程序状态。

     

此规则对Angular的“单向数据流”策略至关重要。您永远不应该担心读取组件值可能会改变其他显示值。在整个单一渲染过程中,视图应该是稳定的。

好。您永远不应该担心读取组件值可能会改变其他显示值。是 Angular的单向数据流规则吗?我不这么认为,因为它似乎不同意该规则的其他提及。我还是很困惑。

2 个答案:

答案 0 :(得分:6)

在Angular pre v1.5中,双向绑定是标准,因此如果您在组件中创建了一个子对象,则父对象保留了对它的引用,因此如果您更新了父对象,它会更新子对象,如果更新了子对象,则更新了父对象。这会产生大量开销,并且您会看到大量子组件维持对父级的双向绑定会对性能产生重大影响,例如,父容器组件加载乘客数据列表并显示子组件对于具有该乘客特定属性的每位乘客。监视父母的变化,并观察每个孩子的变化,并且他们不断被重新评估。

在Angular1.5中引入了一种数据绑定方式,但这是Angular2性能提升的重要组成部分。数据从父级流向子级,但不是相反。如果父数据发生更改,则会将这些更改下推到子项,但如果子项发生更改,则这些更改不会自动传播回父项。您可以通过将事件显式发送回具有已更改数据的父级,并指示父级更新已更改的特定数据来管理从子级到父级的更新。然后,一种方式是数据流接管,父级使用更新的数据,根据需要更新子级。

答案 1 :(得分:0)

"单向数据流"指的是潜在的变更检测流程。那么问题的答案.....

  

您永远不应该担心读取组件值可能会更改其他显示值。是Angular的单向数据流规则吗?

......是的。

在更改检测阶段,Angular将检查模板中表达式中引用的变量是否已更改。如果有,则将此新值插入HTML。当这种检查发生时,“吸气剂”会被吸收。函数或表达式不应更改任何其他值。

它的无副作用部分 https://angular.io/guide/template-syntax#expression-guidelines

非常好的文章(thoughtram.io) https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

  

数据从上到下流动的原因是因为变化   每个单独的检测也始终从上到下进行   组件,每一次,从根组件开始。这个   很棒,因为单向数据流比预测更可预测   周期。我们总是知道我们在视图中使用的数据来自哪里,   因为它只能来自其组件。

     

另一个有趣的观察是变化检测变得稳定   一次通过后。这意味着,如果我们的某个组件导致任何组件   变化检测期间第一次运行后的其他副作用,   Angular会抛出错误