react为什么这么火?

初识React

React 来自于Facebook,是的,就是那个你们听说过但是打不开的网站。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架都不满意,就决定自己写一套,用来架设 instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。所以说,很多东西都是有智慧的懒人创造的。在React的官方博客中明确阐述了React不是一个MVC框架,而是一个用于构建组件化UI的库,是一个前端界面开发工具。所以顶多算是MVC中的V(view)。经过这几年的沉淀,React越来越强大,也受到了越来越多的开发者喜爱。

优点

  • 复杂场景下的高性能
  • 代码量的节省
  • 非常清晰的代码结构
  • 项目将来的可拓展性和可维护性

虚拟DOM

这可以说是一个全新的概念,对于他的好坏,业界也是众说纷纭,但是就我个人来说,我觉得这是一个重大的突破。
所谓的虚拟DOM,就是如下的代码:

ReactDOM.render( 
  

Hello, world!

, document.getElementById('example') );

ReactDOM.render 是 React 的最基本方法,用于将模板(即函数中的第一个参数)转为 HTML 语言,并插入指定的 DOM 节点。而模板中的div其实和DOM中的div完全是两码事儿了,只不过React提供了和DOM类似的Tag和API,事实上React会通过他自己的逻辑去转化为真正的DOM。所以,把这种叫做虚拟DOM。
使用虚拟DOM可以带来的明显好处就是,当有数据变动导致DOM变动时,React不是全局刷新,而是通过它内部的 dom diff算法计算出不同点,然后以最小粒度进行更新。这也是React号称性能好的原因。

JSX

JSX是React的重要组成部分,他使用类似XML标记的方式来声明界面及关系。HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render( 
  
{ names.map(function (name) { return
Hello, {name}!
}) }
, document.getElementById('example') );

上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。这为我们的代码编写提供了极大的便利,而且JSX中除了使用HTML标记之外,并没有复杂的标记,这种自然而直观的方式直接降低了React的学习门槛并且让代码更容易理解。

简化可复用的组件

虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即某个独立功能或者界面的封装,达到复用或者UI和业务松耦合的目的。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。
React框架里面使用了简化的组件模型,但更彻底地使用了组件化的概念。React将整个UI上的每一个功能模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成更大的组件。这种做法已经在instagram 网站上普遍实施,大家可以看看instagram的前端源代码。

与传统组件有什么区别:
1、React通过功能来定义最小粒度的组件。
2、React组件的生命周期:Mounting、Updating、Unmounting。

组件化:组件封装,组件复用
组件封装:封装视图、数据、变化逻辑(数据驱动视图变化)
组件复用:props传递,复用

React 与 Vue 的本质区别

1、vue 本质是MVVM框架,由MVC发展而来。React 本质是前端组件化框架,由后端组件化发展而来
2、vue使用模板,React使用JSX
3、React本身就是组件化,没有组件化就不是React。vue也支持组件化,不过是在MVVM上的扩展

总结

React为前端开发带来许多便利,降低前端代码的复杂性,而且能够保证性能保证质量,所以才能这么火,并且有这么多的人来加入React开发的行列。

你可能感兴趣的:(react为什么这么火?)