【ReactJS】尝试理解React新的前端思维方式

分手后的思念是犯贱 2022-06-04 08:15 148阅读 0赞

### React特点： ###

*  **虚拟DOM**: React也是以数据驱动的，每次数据变化React都会扫码整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。
 *  **组件化**： React可以从功能角度横向划分，将UI分解成不同组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关系自身的逻辑，彼此独立。
 *  **单项数据流**：React设计者认为数据双向绑定虽然便捷，但在复杂场景下副作用也是很明显，所以React更倾向于单向的数据流动-从父节点传递到子节点。（使用ReactLink也可以实现双向绑定，但不建议使用）。

--------------------

要了解一样东西的特点，最好的方法当然是拿这个东西和另一样东西作比较。我们就拿React和jQuery来比较。  
　　  
　　jQuery：是一个JavaScript 的库，借鉴了结合CSS简化和精简了JavaScript的操作方式和解决浏览器兼容问题。选中一些DOM元素，然后对这些元素做一些操作，这是一种最容易理解的开发模式。但当业务逻辑复杂的时候，每行代码都会有不知所云的感觉。  
　　  
　　React：是一个JavaScript的框架，React利用声明式的语法，让开发者专注于描述用户界面“显示成什么样子”，而不是重复思考“如何去显示”，这样可以大大提高开发效率，也让代码更加容易管理。虽然React是通过重复渲染来实现动态更新效果，但是借助Virtual DOM技术，实际上这个过程并不牵涉太多的DOM操作，所以渲染效率更高。React的主要理念之一就是基于组件来开发应用。

jQuery 与 React 的区别：

![这里写图片描述][SouthEast]

**Q：**在同一个区域将JS还有HTML混在一起写，不是说是一种坏的风格吗？  
**A：**对于简单的页面而言，这样写可能会是一种坏的风格，但是对于大型的网页应用就不一定了。在大型的网页应用中，会有成百上千的UI，每一个UI都包含他自己的标签以及行为。对于每一个UI而言，如果标签还有事件行为放在一起，会更加利于维护。React就是设计用来制作大型的网页应用。众所周知的，React是全球最大的网页应用公司FaceBook开源并且使用的。  
  
  
作为软件设计的通则，组件的划分要满足**高内聚**和**低耦合**的原则。

**高内聚** 指的是把逻辑紧密相关的内容放在一个组件中。用户界面无外乎内容、交互行为和样式。传统上，内容由HTML表示，交互行为放在JavaScript代码文件中，样式放在CSS文件中定义。这虽然满足一个功能模块的需要，却要放在三个不同的文件中，这其实不满足高内聚的原则。React却不是这样，展示内容的JSX、定义行为的JavaScript代码，甚至定义样式的CSS，都可以放在一个JavaScript文件中，因为它们本来就是为了实现一个目的而存在的，所以说**React天生具有高内聚的特点**。  
　　  
　　**低耦合** 指的是不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立。保持整个系统的低耦合度，需要对系统中的功能有充分的认识，然后根据功能点划分模块，让不同的组件去实现不同的功能，这个功夫还在开发者身上，不过，React组件的对外接口非常规范，方便开发者设计低耦合的系统。

### React是在什么历史背景下产生的？ ###

最初AngularJS使用了MVC(模型-视图-控制器)模式构建，然后逐渐演化成了MVVM(模型-视图-视图模型)-MVC混合架构。React却是另一方面，它的关注点只在MVC模型的”V”上 – 它被设计用来展现数据，而将其他方面交由应用架构中编程人员选择的其他组件负责。  
　　　  
　　虽然Facebook最初也是用MVC这种框架，但是，Facebook的工程部门逐渐发现，对于非常巨大的代码库和庞大的组织，按照他们的原话就是“MVC真的很快就变得非常复杂”。每当工程师想要增加一个新的功能时，对代码的修改很容易引入新的bug，因为不同模块之间的依赖关系让系统变得“脆弱而且不可预测”。对于刚刚加入团队的新手，更是举步维艰，因为不知道修改代码会造成什么样的后果。如果要保险，就会发现寸步难移；如果放手去干，有可能引发很多bug。  
　　  
　　React和MVC思想的框架不同，每个组件独立封装，功能独立，我们只需关心自己部分的逻辑。与单一功能原则相同：独立的组件应该只做一件事情。

### 前后端MVC框架渲染有何区别？ ###

MVC框架提出的数据流很理想，用户请求先到达Controller中，由Controller调用Model获得数据，然后把数据交给View，但是，在实际框架实现中，总是允许View和Model可以直接通信，越来越多的同行发现，在MVC中让View和Model直接对话就是灾难。  
　　  
　　服务器端MVC框架往往就是每个请求就只在Controller-Model-View三者之间走一圈，结果就返回给浏览器去渲染或者其他处理了，然后这个请求生命周期的Controller-Model-View就可以回收销毁了，这是一个严格意义的单向数据流；对于浏览器端的MVC框架，存在用户的交互处理，界面渲染出来之后，Model和View依然存在于浏览器中，这时候就会诱惑开发者为了简便，让现存的Model与View直接对话。

### React的Virtual DOM ###

传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。  
　　  
　　为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新Virtual DOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。  
　　  
　　虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。　　  
　　如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。  
　　  
　　React 为了更高超的性能而使用虚拟 DOM 作为其不同的实现。 它同时也可以由服务端 Node.js 渲染 － 而不需要过重的浏览器 DOM 支持。

[SouthEast]: /images/20220604/0fdfdd9f69f946909c356765f447d852.png