单向数据绑定 VS 双向数据绑定

单向数据绑定

React 的数据是单向绑定的,不像 Vue 支持双向绑定。相应的 React 中的数据流也是单向的,这也是 React 提倡的一点,单向数据绑定能够避免状态管理复杂度上升时产生的各种问题。试想一下在双向数据绑定中:如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。 当系统变得错综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。单向数据绑定可以让应用变得更加可预测且容易理解。

单向数据绑定的优点:

  1. 所有状态的改变可记录、可跟踪,源头易追溯;
  2. 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;
  3. 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);
  4. 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

双向绑定 = 单向绑定 + UI事件监听

单向数据绑定的缺点:

  1. HTML代码渲染完成,无法改变,有新数据,就须把旧HTML代码去掉,整合新数据和模板重新渲染;
  2. 代码量上升,数据流转过程变长,出现很多类似的样板代码;
  3. 同时由于对应用状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用 TodoMVC等),会显得啰嗦及繁琐。

双向数据绑定

双向数据绑定带来了双向数据流,数据模型(Module)和视图(View)之间的双向绑定,无论数据变化,或是用户操作,都能带来互相的变动,自动更新,适用于UI控件中(通常是类表单操作)。

双向数据绑定优点:

  1. 用户在视图上的修改会自动同步到数据模型中去,数据模型中值的变化也会立刻同步到视图中去;
  2. 无需进行和单向数据绑定的那些CRUD(Create,Retrieve,Update,Delete)操作;
  3. 在表单交互较多的场景下,会简化大量业务无关的代码。

双向数据绑定缺点:

  1. 无法追踪局部状态的变化;
  2. “暗箱操作”,增加了出错时 debug 的难度;
  3. 由于组件数据变化来源入口变得可能不止一个,数据流转方向易紊乱,若再缺乏“管制”手段,血崩。