初识React

初识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开发的行列。