初识React
React 来自于Facebook，是的，就是那个你们听说过但是打不开的网站。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架都不满意，就决定自己写一套，用来架设 instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。所以说，很多东西都是有智慧的懒人创造的。在React的官方博客中明确阐述了React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具。所以顶多算是MVC中的V（view）。经过这几年的沉淀，React越来越强大，也受到了越来越多的开发者喜爱。
优点
- 复杂场景下的高性能
- 代码量的节省
- 非常清晰的代码结构
- 项目将来的可拓展性和可维护性
虚拟DOM
这可以说是一个全新的概念，对于他的好坏，业界也是众说纷纭，但是就我个人来说，我觉得这是一个重大的突破。
所谓的虚拟DOM，就是如下的代码：
ReactDOM.render(
<h1>Hello, world!</h1>,
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(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
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开发的行列。
网友评论