为什么使用react

2024年5月26日 155次阅读 来源: 荔枝

一. 函数式编程

 React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。
 开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX 语法，复用组件变得非常容易，
 同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器
 端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。

二 虚拟DOM

DOM操作的效率是很低的，而且不是一般的慢，而且这也是引发性能问题的常见问题之一。为什么会慢呢？
因为对 DOM的修改为影响网页的用户界面，重绘页面是一项昂贵的操作。太多的DOM操作会导致一系列的重
绘操作，为了确保执行结果的准确性，所有的修改操作是按顺序同步执行的。我们称这个过程叫做回流
（reflow），同时这也是最昂贵的浏览器操作之一。回流操作主要会发生在几种情况下：
  • 当对DOM节点执行新增或者删除操作时。
  • 动态设置一个样式时（比如element.style.width=”10px”）。
  • 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。 解决问题的关键，就是限制通过DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的，这些浏览器将对对DOM的操作放进一个队列，并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说，在JavaScript执行的过程中，用户不能和浏览器进行互动，直到一个回流操作被执行。（失控脚本对话框会触发回流操作，因为他执行了一个中止JavaScript执行的操作，此时会对用户界面进行更新）
真实页面对应一个 DOM 树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作DOM进行更新。DOM 操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。React 把真实 DOM 树转换成 JavaScript 对象树，每次数据更新后，重新计算 Virtual DOM，并和上一次生成的 Virtual DOM 做对比，对发生变化的部分做批量更新。React 也提供了直观的 houldComponentUpdate 生命周期回调，来减少数据变化后不必要的 Virtual DOM 对比过程，以保证性能。我们说 Virtual DOM 提升了 React 的性能，但这并不是 React 的唯一亮点。此外，Virtual DOM的渲染方式也比传统 DOM 操作好一些，但并不明显，因为对比 DOM 节点也是需要计算资源的。它最大的好处其实还在于方便和其他平台集成，比如 react-native 是基于 Virtual DOM 渲染出原生控件，因为 React 组件可以映射为对应的原生控件。在输出的时候，是输出 Web DOM，还是 Android 控件，还是 iOS 控件，就由平台本身决定了。因此，react-native 有一个口号——LearnOnce，Write Anywhere。
    原文作者：荔枝
    原文地址: https://segmentfault.com/a/1190000015333760
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞