单向数据流和双向数据绑定

单向数据流和双向数据绑定

  今天项目上线,测试正在努力找茬,无奈我的代码写的太好没有bug,所以就在网上随便找东西看,看了一些关于react的视频,之前没有了解过react所以就有点好奇,多看了一会会,分享一下:

关于怎么react的出生,还是因为FaceBook在研发维护的过程中,有些bug在用户使用的过程中经常复现,而复现的原因是在双向数据绑定的模式下,有些数据实际上已经改变了,但是同步不到UI上,并且还找不到问题的所在,FaceBook的程序猿技术牛逼脾气火爆啊,双向数据绑定出bug我不用了,我自己造一个不要双向数据绑定的框架自己玩,于是,单向数据流的代表react应运而生!

先说说什么是单向数据流:

如上图所示: 用户在页面进行操作,操作改变状态,组件获取到改变以后的状态,然后再根据状态改变视图的显示,这就是单向数据流.

再来说一下双向数据绑定:

双向数据绑定在目前的框架中有两种实现方式:

AngularJs (这里只说AngularJs 1.x 毕竟我没有接触过2.0以上的版本). angularjs双向数据绑定的技术实现是脏检查，大致的原理就是:

Angularjs内部会维护一个序列,将所有需要监控的属性放在这个序列中，当发生某些特定事件时,Angularjs会调用 $digest方法，这个方法内部做的逻辑就是遍历所有的watcher,对被监控的属性做对比，对比其在方法调用前后属性值有没有发生变化，如果发生变化，则调用对应的handler.这种方式的缺点就是遍历轮训watcher是非常消耗性能,尤其是对单页应用来说.

Vue

Vue使用的是ES5中提出的 Object.defineProperty方法,封装属性访问器,使用属性访问器来改变视图的变化,

综上所述

双向数据绑定是用户操作视图,通过视图改变数据,然后一些计算属性也会跟着改变,这种双向数据绑定的方式在开发过程中用的是真的爽,但是一旦碰到一些bug,解决起来就不会很顺心,也相当麻烦!

也许上面我说的不是很明白吧,上一点react单向数据流的代码吧:

如果将我标注释的这个input中,change事件注释掉或者删掉,那么在input中输入的时候,input中会一直是空白,不会有任何变化.

下面是一个react的一些组件的链接 个人感觉比较好用:

https://codesandbox.io/s/1qvnwqyj64