React 是 Facebook 内部的一个 JavaScript 类库, 可用于创建 web 用户交互界面. 它引入了一种新的方式来处理浏览器 DOM.
那些需要手动更新 DOM, 费力地记录每一个状态的日子一去不复返了 -- 这种老舅的方式既不具备扩展性, 又很难加入新的功能, 就算可以, 也是有着冒着很大的风险.
React 使用很新颖的方式解决了这些问题. 你只需要声明地定义各个时间点的用户界面, 而无序关系在数据变化时, 需要更新哪一部分 DOM. 在任何时间点, React 都能以最小的 DOM 修改来更新整个应用程序.
React 引入了一些激动人心的新概念, 向现有的一些最佳实践发起了挑战. 学习这些概念, 将帮助你理解它们的优势, 创建具备高扩展性的单页面应用 (SPA).React 把主要的注意力放在了应用的 "视图" 部分, 没有限定与服务端交互和代码组织的方式.
背景介绍:
在 Web 应用开发的早期, 构建 Web 应用的唯一方案就是向服务器发送请求, 然后服务端响应请求并且返回一个完整的页面. 从开发的角度上讲这种方法非常简单, 因为开发者无须关心在浏览器端发生了什么.
像 PHP 这种语言, 更加简化了这种开发方式. 使用 PHP 开发功能组件也很容易, 这有助于开发者重用代码, 掌握应用程序的行为. 开发的简单性使得 PHP 成为了一门非常流行的 Web 应用开发语言.
不过, 使用这种开发方式很难打造出极佳的用户体验. 因为无论每次用户想要做点什么, 都需要向服务端发送请求并等待服务端的响应, 这会导致用户失去在页面上所积累的状态.
为了实现更好的用户体验, 人们开始开发类库, 使用 JavaScript 在浏览器端渲染应用. 这些类库使用的方法也不尽相同简单的会使用带参数的模板, 复杂的就完全掌握整个应用. 随着开发者在越来越大的应用中使用这些类库, 应用也变得越来越难于把握, 因为这些应用是一系列互相作用的事件的结果. 与 PHP 那样传统的应用开发方式比起来, 这种客户端应用很难做好.
React 发源自 Facebook 的 PHP 框架 XHP 的一个分支. XHP 作为一个 PHP 框架, 旨在每次有请求进来时渲染整个页面. react 的产生就是为了把这种重新渲染整个页面的 PHP 式工作流带到客户端应用中来.
react 的优点
其实在官网上给出了一些 react 的好处, 但是有点太官方不太容易理解, 因此在这写出我的理解.
这是官网上给出的三点优势
1, 声明式
声明式 : 很多东西不需要亲自去作, 声明一下就行了, 不需要亲自去操作 DOM, 只需要更新数据, 界面会自动变化
2, 组件化
例如一个很复杂的界面功能, 想要简化的话, 就得需要拆分, 拆分成一个个的小的功能, 每一个小的界面功能就是一个组件, 就是拆分成了很多组件, 最后拼装起来就行了, 最后维护起来也很方便.
3, 一次学习, 随处编写
现在的 react 不仅自能写 Web 应用也还能写手机端应用使用 react native 可以打包成安卓和 iOS.
4, 高效
1), 虚拟 DOM, 不直接操作 DOM.
2),DOM Diff 算法, 最小化页面重绘.
例如一个页面有很多地方需要更新, 会先都在虚拟 DOM 完成修改, 最后会映射到真实的 DOM 中, 完成一次性修改, 重绘就会减少.
React 本质上只关心两件事:
1, 更新 DOM;
2, 响应事件.
React 不处理 Ajax, 路由和数据存储, 也不规定数据组织的方式. 它不是一个 Model-View-Controller 框架. 如果非要问它是什么, 他就是 MVC 里的 "V".React 的精简允许你将它集成到各种各样的系统中 .
每次状态改变时, 使用 JavaScript 重新渲染整个页面会非常慢, 这应该归咎于读取和更新 DOM 的性能问题. React 运用一个虚拟的 DOM 实现了一个非常强大的渲染系统, 在 React 中对 DOM 只更新不读取.
工作状态:
React 以渲染函数为基础. 这些函数读入当前的状态, 将其转换为目标页面上的一个虚拟表现. 只要 React 被告知状态有变化, 他就会重新运行这些函数, 计算出页面的一个新的虚拟表现, 接着自动把结果转换成必要的 DOM 更新来反映新的表现.
这种方式看上去应该比通常的 JavaScript 方案 -- 按需要更新每一个元素 -- 要慢, 但是 React 确实是这么做的: 它使用了非常高效的算法, 计算出虚拟页面当前版本和新版间的差异, 基于这些差异对 DOM 进行必要的最少更新. React 赢就赢在了最小化了重绘, 并且避免了不必要的 DOM 操作, 这两点都是公认的性能瓶颈.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/14221.html