Facebook颠覆式前端UI开发框架——React 来源：开源最前线 猿妹
前阵⼦Raect协议更改问题，在业内引起不⼩的风波，好在有惊⽆险，最终，FB 还是让步了，放弃专利条款，React 许可证改为标准的 MIT。那
么，React 到底是有多⼤威⼒产⽣如此影响，⼀起了解下就知道了
构建⽤户界⾯的 JavaScript 库 React
授权协议：MIT
开发语⾔：JavaScript
操作系统：跨平台
开发⼚商：Facebookreact native
React 简介 React 是 Facebook 推出的⼀个⽤于构建⽤户界⾯的 JavaScript 库，主要⽤于构建 UI，⽽不是⼀个 MVC 框架，但可以使⽤React 作为 MVC 架构的 View 层轻易的在已有项⽬中使⽤，它是⼀个⽤于构建⽤户界⾯的 JavaScript 库，起源于 Facebook 的内部项⽬，⽤来架设 Instagram 的⽹站，于 2013 年 5 ⽉开源。React 拥有较⾼的性能，代码逻辑⾮常简单，因此，越来越多的开发者选择使⽤它。 React 视图通常采⽤包含以⾃定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了⼀种⼦组件不能直接影响外层组件（"data flows down"）的模型，数据改变时对 HTML ⽂档的有效更新，和现代单页应⽤中组件之间⼲净的分离。 React 有如下特性：● 声明式 React 可以⾮常轻松地创建⽤户交互界⾯。为你应⽤的每⼀个状态设计简洁的视图，在数据改变时 React 也可以⾼效地更
新渲染界⾯。以声明式编写 UI，可以让你的代码更加可靠，且⽅便调试。 ● 组件化 创建好拥有各⾃状态的组件，再由组件构成更加复杂的界⾯。⽆需再⽤模版代码，通过使⽤ JavaScript 编写的组件你可以更好地传递数据，将应⽤状态和 DOM 拆分开来。 ● ⼀次学习，随处编写 ⽆论你现在正在使⽤什么技术栈，你都可以随时引⼊ React 开发新特性。React 也可以⽤作开发原⽣应⽤的框架 React Native。 React 的原理 在 Web 开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对 DOM 进⾏操作。⽽复杂或频繁的 DOM 操作通常是性能瓶颈产⽣的原因（如何进⾏⾼性能的复杂 DOM 操作通常是衡量⼀个前端开发⼈员技能的重要指标）。React 为此引⼊了虚拟
DOM（Virtual DOM）的机制：在浏览器端⽤ Javascript 实现了⼀套 DOM API。可以看下图： React 能够批处理虚拟 DOM 的刷新，在⼀个事件循环（Event Loop）内的两次数据变化会被合并。React 进⾏开发时所有的 DOM 构造都是通过虚拟 DOM 进⾏，每当数据变化时，React 都会重新构建整个 DOM 树，然后 React 将当前整个 DOM 树和上⼀次的 DOM 树进⾏对⽐，得到 DOM 结构的区别，然后仅仅将需要变化的部分进⾏实际的浏览器 DOM 更新。 可以看到，使⽤ React ⼤⼤降低了逻辑复杂性，意味着开发难度降低，可能产⽣Bug的机会也更少。⾄于 React 如何做到将原来O(n^3)复杂度的 Diff 算法降低到 O（n）。 这也是为什么 React 会如此受欢迎的原因，阿⾥、百度、 Strikingly、杭州⼤搜车、美团等等企业都在使⽤，其实，REACT 不单单在应⽤于实际项⽬中，如果读过最近两年很⽕的前端框架源码的都知道，React 的影⼦⽆处不在。 代码⽰例 下⾯我们⽤ codepen 来演⽰ React.js
的⼀个 hello world 的⽰例： 如上所述，React 是⼀个全新思路的前端 UI 框架，它完全接管了 UI 开发中最为复杂的局部更新部分，擅长在在复杂场景下保证⾼性能；同时，它引⼊了基于组件的开发思想，从另⼀个⾓度来重新审视UI的构成。通过这种⽅法，不仅能够提⾼开发效率，⽽且可以让代码更容易理解，维护和测试。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。