React的数据绑定真的是一种方式吗？看起来好像是双向的

Question

这是我正在阅读的几个React教程：

  国家推动Facebook的人称之为单向反应数据   流，意味着我们的UI将对每个状态的变化作出反应。

和

  

通常，UI具有许多状态，这使得管理状态   难。通过每次状态更改时重新呈现虚拟DOM   发生，React让你更容易思考你的状态   应用程序在。该过程看起来像这样，信号   通知我们的应用程序一些数据已更改→重新呈现虚拟DOM - ＆gt;   使用新虚拟DOM区分先前的虚拟DOM - ＆gt;只更新真正的DOM   必要的改变。

第一句话似乎暗示数据流从React到UI。但第二个引用似乎表明它从DOM到React，然后重新渲染虚拟DOM和diff进程，而不是重新绘制真正的DOM。这听起来很像Angular的双向数据绑定。

这是真的吗？我错过了什么？单向反应数据流是Angular的双向数据绑定的另一个名称吗？

Answer 1

我认为有必要对React和Flux进行区分，这两者都实现了单向数据流。我只会在这里触及React。

在Angular中，由于角度的双向数据绑定和摘要循环，对DOM的更改将直接改变控制器中绑定范围变量的值。这是两种方式，因为当然，控制器中的任何更改也会直接反映在附加到它的视图中。

将Angular视为Controller <--> View

在React中，组件总是根据其DOM和内部状态呈现其DOM。 React组件可以监听在它呈现的DOM中被触发的事件，这可能听起来有点像它面对的双向数据流但是有一个重要的区别：在DOM上触发的事件不会直接更新内部组件的状态。组件必须侦听事件，然后使用新状态显式更新组件。然后，这种状态更改会触发DOM重新呈现（如果需要）。通过这种方式，组件props和state是唯一的事实来源，并始终驱动DOM输出。当然，DOM中的更改可能会影响组件，但它是以间接方式完成的。

将React视为Component State --> DOM --> New Component State --> New DOM

Answer 2

这里的流程是：

组件

状态 - ＆GT;虚拟DOM - ＆gt; DOM

这始终是流程，无论是初始渲染还是第二次渲染。

1. 引用的位是：state-＆gt; virtual DOM - ＆gt; DOM
2. newStateDifferentFromOldState - ＆gt;虚拟DOM
3. 使用虚拟DOM从2
区分虚拟DOM 1
4. 仅更新DOM的元素，这些元素是执行3的净差异。

e.g。 1-> 2-> 3-> 4，按顺序从2（2-> 3-> 4-> 2-> 3-> 4 ...依此类推）

这与双向数据绑定的概念无关。

Answer 3

Angular的两种绑定方式的本质是视图既受模型又受用户输入的约束。

使用React，视图仅绑定到状态，用户的输入不能直接更改视图，而是触发组件自己的方法来更新其状态，而Reacts的工作是重新呈现视图所以它反映了国家。