React浅了解

React是一个流行的JavaScript库，用于为网页或应用程序构建可重用、组件驱动的用户界面。

React将HTML和JavaScript功能结合到自己的标记语言JSX中。

React还可以方便地管理整个应用程序中的数据流。下面将分别介绍如何创建不同的React组件、以状态属性的形式管理数据、使用不同的生命周期方法，如componentDidMount等。

React是一个由Facebook创建和维护的开源视图库，是呈现现代web应用程序的用户界面（UI）的好工具。

React使用名为JSX的JavaScript语法扩展，它允许我们直接在JavaScript中编写HTML，允许我们在HTML中使用JavaScript的全部编程功能，有助于保持代码的可读性。大多数情况下，JSX与HTML类似，但也有一些关键的区别。例如，因为JSX是JavaScript的语法扩展，所以实际上可以直接在JSX中编写JavaScript。为此，只需在花括号中包含希望被视为JavaScript的代码：{“这被视为JavaScript代码”}。然而，由于JSX不是有效的JavaScript，因此必须将JSX代码编译为JavaScript，对于这一过程，流行的工具是Babel。

ReactDOM.render(JSX, document.getElementById(‘root’))这个函数调用将JSX放入React自己的轻量级DOM呈现，然后，React使用自己DOM的快照来优化更新实际DOM的特定部分。

使用JSX将h1元素分配给常量JSX：

const JSX = <h1>Hello JSX!</h1>;

JSX也可以表示更复杂的HTML。关于嵌套JSX，它必须返回单个元素（可以理解为只返回父元素）。

一个父元素将包装所有其他级别的嵌套元素。几个没有父元素包装的兄弟元素编写的JSX元素将无法传输编译。

 有效的JSX：

<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>

无效的JSX：

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

看成功的例子：

let JSX=
<div>
  <h1>Paragraph One</h1>
  <p>Paragraph Two</p>
  <ul>
    <li>four</li>
    <li>five</li>
    <li>six</li>
  </ul>
</div>;
/*编译之后返回：
Paragraph One
Paragraph Two

·four
·five
·six
*/

。。。

原文地址：http://www.cnblogs.com/168-h/p/16790861.html