浅谈什么是 React

231 阅读3分钟

前言

学了那么久的 React,日常开发也一直在用,但我猛然发现其实我并不了解它。关于 React 能道上几句但说不出所以然,脑子里虽有概念但过于模糊,于是我决定总结一番,搞清楚 React 的本质。

什么是 React

React 是用于构建用户界面的 JavaScript 库,React 只关注视图层(MVC 中 的 V)。

React 有大公司背书,生态完善,方案多,与 Vue、Angular 相比,React 目前略胜一筹。

谁开发的

React 起初由 Facebook 的软件工程师 Jordan Walke 创建的,因为该公司对市场上所有 JavaScript MVC 框架都不满意,就决定自己写一套。

于2011年部署于 Facebook 的 newsfeed,随后在2012年部署到 Instagram,2013年5月宣布开源。

十年“陈酿”,React 正在被腾讯、阿里等一线大厂广泛使用。

为什么要用 React

原生 JavaScript 的痛点

  • 原生 JavaScript 操作 DOM 繁琐、效率低

  • 使用 JavaScript 直接操作 DOM,浏览器会进行大量的重绘重排,性能差

  • 原生 JavaScript 没有组件化编码方案,代码复用率低

React 的特点

  • 声明式设计:提高开发效率,增强代码可读性(更加语义化)

  • 组件化模式:提高代码复用率,借助 JSX 来写高内聚 UI 组件

  • 高效:底层使用虚拟 DOM 和 Diff 算法,最大限度地减少与真实 DOM 的交互,性能出色

  • 灵活:完美的与其它库或框架集成,可以使用 Node 进行服务端渲染,也可以使用 React Native 开发原生移动应用

  • 单向数据流:让组件状态的维护与管理更加清晰,比双向绑定更简单、更快

React 的主要原理

传统的 Web 应用,操作 DOM 一般是直接更新操作的,但是我们知道 DOM 操作通常是比较昂贵的。

而 React 为了尽可能减少对 DOM 的操作,提供了一种革命性的、强大的方式来更新 DOM,代替直接的 DOM 操作,它就是 Virtual DOM,一个轻量级的虚拟的 DOM。

Virtual DOM 是 React 抽象出来的一个对象,描述 DOM 应该是什么样子的,应该如何呈现,React 通过 Virtual DOM 来更新和管理真实的 DOM。

为什么通过这多一层的 Virtual DOM 操作就能更快呢?这是因为 React 有个 Diff 算法。更新 Virtual DOM 并不会立即影响真实的 DOM,React 会等到事件循环结束,然后利用 Diff 算法,通过当前新的 DOM 表述与之前的作比较,计算出最小的步骤更新真实的 DOM。

当数据变化导致 DOM 更新时,React 不会全局刷新,而是通过它内部的 DOM Diff 算法计算出不同点,然后以最小粒度进行更新,这就是 React 强大性能的由来。

最后

文中如果有错误或者不足之处,欢迎大家在评论区指正。

你的点赞是对我莫大的鼓励!感谢阅读~