读书笔记（十二）：React和Vue

1.数据绑定
vue：采用了双向数据绑定策略，依靠Object.defineProperty（3.0已迁移到Proxy）及监听DOM事件实现。实例中的data与模板展现在一条线上，无论谁被修改，另一方都会发生变动。

react：局部刷新策略。当数据发生变化时，直接重新渲染组件，得到最新的视图。看似粗暴，换来了简单直观的效果：数据变化只需要刷新即可，而且框架能够对这种刷新在性能上提供一定的保障。

比较：vue有computed计算属性，和react-redux中的mapStateToProps差不多，都是通过计算将所需要的数据注入给组件使用。双向绑定和单向数据流并没有直接关联，双向绑定是指数据和视图之间的绑定关系，而单向数据流是指组件之间的数据传递。

2.组件化
vue：组件实质上是一个vue实例，创建时都需要：设置数据监听、编译模板、将模板应用到DOM上，而且要在更新时根据数据变化更新DOM的过程。

react：以组件功能和UI为维度划分。

比较：都提供了生命周期方法。组件间数据流都是单向的，通过props实现父组件向下传递数据；基于props回调实现子组件向父组件传递数据。通过context和provide、inject实现跨层级数据通信。vue基于events实现子组件向上发送消息给父组件。

3.数据状态管理
比较：分别使用redux和vuex进行状态管理，不允许组件直接修改store state，而是需要使用dispatch action来通知store变化。vuex改变store的方法支持提交一个mutation，类似于事件发布/订阅系统，每个mutation都通过一个字符串来表示事件类型，通过回调函数来进行对应的修改。另一个区别是：vuex的store是直接注入组件实例中的；redux需要通过connect方法把props和dispatch注入组件中。

造成不同的本质原因：

• redux中的reducer每次都会生成新的state代替旧的，而vuex是直接对其进行修改。
• redux在检测数据变化时是通过浅比较的方式比较差异的，vuex是通过遍历数据的getter/setter比较的。

4.渲染更新
react：与redux搭配后也是完整的MVVM类库。当某个组件的状态发生变化时，以该组件为根重新渲染整个组件子树。也可以使用PureComponent或是手动shouldComponentUpdate来避免不必要的渲染，但精细的比较会产生一定的额外负担。

vue：是MVVM模式的典型体现。组件的依赖是在渲染过程中自动追踪，因此系统能精确地知晓哪个组件需要被重新渲染。理论上看，vue的渲染更新机制更加细粒度，更加精确。