React是什么？React用来做什么？

React 如是说

React是由Facebook（facebook）开放源码的两个展开创建界面的这款JavaScript库，现如今已应用领域于Facebook及母公司的Instagram应用领域。

React与巨大的AngularJS相同的地方性是它只著眼于MVC架构中的V，即快照；这两点使React很难与合作开发人员已近的合作开发栈展开结合。

React在采用的这时候，你如果从UI起程，抽象化出相同的模块，而后将它合叶出来；这两点切合了Web合作开发模块化的态势。

React应用领域

React 的中心思想是：PCB模块。

各模块保护他们的状况和UI，当状况更改，手动再次图形整座模块。

如前所述此种形式的两个单纯体会是他们无须须要反反复复地往复搜寻某个 DOM原素，接着操作形式 DOM 去更动 UI。

React 大体上包涵上面那些基本概念：

模块 JSX Virtual DOM Data Flow

这儿透过两个单纯的模块来加速介绍那些基本概念，和创建起对 React 的两个整体再次认识。

import React, { Component } from react;

import { render } from react-dom;

class HelloMessage extends Component {

render() {

return

Hello {this.props.name}

;

}

// 加载模块到 DOM 原素 mountNode

render(<HelloMessage name=”John” />, mountNode);

模块

React 应用领域都是构建在模块之上。

上面的 HelloMessage 是两个 React构建的模块，最后一句 render 会把这个模块显示到页面上的某一原素 mountNode 里面，显示的内容是 <div>Hello John</div>。

props 是模块包涵的两个核心基本概念之一，另两个是 state（这个模块没用到）。可以把 props 看作是模块的配置属性，在模块内部是不变的，只是在调用这个模块的这时候传入相同的属性（比如这儿的 name）来定制显示这个模块。

JSX

从上面的代码可以看到将 HTML 直接嵌入了 JS 代码里面，这个是 React 提出的一种叫 JSX 的语法，这如果是最开始接触 React 最不能接受的设定之一，因为前端被“表现和逻辑层分离”此种思想“洗脑”太久了。但实际上模块的 HTML 是组成两个模块不可分割的一部分，能够将 HTML PCB出来才是模块的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的模块化成为了可能。

好消息是你可以不一定采用此种语法，后面会进一步如是说 JSX，到这时候你可能就会喜欢上了。现在要知道的是，要采用包涵 JSX 的模块，是须要“编译”输出 JS 代码才能采用的，之后就会讲到合作开发环境。

Virtual DOM

当模块状况 state 有更动的这时候，React 会手动调用模块的 render 方法再次图形整座模块的 UI。

当然如果真的这样大面积的操作形式 DOM，性能会是两个很大的问题，所以 React 实现了两个VirtualDOM，模块 DOM 结构是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM上实现了两个 diff 算法，当要再次图形模块的这时候，会透过 diff 寻找到要更改的 DOM 节点，再把这个修改更新到浏览器实际的DOM 节点上，所以实际上不是真的图形整座 DOM 树。这个 Virtual DOM 是两个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。