React原理的认识

React原理的认识

今天被一个朋友问到React的背景和原理，我记得自己以前总结过，但是还是有点懵，所以再写一下，增加自己的认知。

React是MVC架构的V层，React把每一个组件当成一个状态机

在通常web应用开发时，我们总是需要将数据实时的展示到页面中去，以往的开发模式是每当数据产生变化，总是重新渲染整个页面，即使只改变一小部分，也会渲染整个页面，这就导致了性能的低下。为此React引入了虚拟DOM(virtual dom)，虚拟dom的原理是每当数据产生变化，React会重新构建整个dom树，然后React通过内置的diff算法，将重新构建的dom树和上一次的dom树进行比较，得到dom的区别，然后仅仅将产生变化的部分进行实际的浏览器dom更新。

尽管每一次的数据变化都会重新构建dom树，但是虚拟dom是内存数据，内存的性能极高，对实际dom操作仅仅是diff部分，因而达到提高性能的目的。

这样在保证性能的同时，开发者将不在需要关注某个数据的变化如何更新到一个或多个具体的dom元素。React大大降低了逻辑的复杂性，降低开发难度

组件化

虚拟dom不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，组件就是封装起来具有独立功能的UI组件。UI上每一个功能相对独立的模块定义成组件，小的组件构成大的组件，最终完成UI的构建。

MVC的 开发模式做到了模型视图控制器的分离，将前后端分离，开发者以技术的角度对UI进行拆分

对于React来说，是从功能的角度出发，将UI拆分成不同的组件，每个组件都进行独立的封装

组件的特征

• 可组合：一个组件和其他组件一起使用，或嵌套在另一个组件内部
• 可重用：每个组件都有重复的功能，可在多个场景使用
• 可维护：每个小的组件包含自身的逻辑，更容易被理解

Vue的原理

主要是 双向数据绑定（响应式的数据绑定）

vue双向数据绑定的原理

利用了Object.defineProperty这个方法重新定义了对象 获取属性值（set）和（get）设置属性值