react.js
---恢復內容開始---
一.React的定義
React 是由Facebook 創建的一個開源項目。它提供了一種在JavaScript中構建用戶界面的全新方式。react針對的是現代風格的JavaScript開發生態系統。React 是一個使用JavaScript 和XML技術（可選）構建可組合用戶界面的引擎。下面對React定義的每個部分加以詳細的說明：
React 是一個引擎：React的網站將它定義為一個庫，但是我覺得使用“引擎”這個詞更能體現出React的核心優勢：用來實現響應式UI 渲染的方式。React的方式是將狀態（在一個給定的時間點，所有用來定義應用程序的內部數據）從展現給用戶的UI中分離出來。在React中，你可以聲明如何 將應用程序的狀態表現為DOM的虛擬元素，然後自動更新DOM以反映出狀態的變化。
創建可組合用戶界面：減少創建和維護用戶界面的的復雜性一直是React的核心目標。React擁抱了這樣一種理念：將UI“打散”成易於重用、擴展和維護的組件與自包含的關註特定用途的構件。
用JavaScript 和XML技術（可選）:React是一個可用於瀏覽器、服務器和移動設備之上的純JavaScript庫。
二.React 的優點
1）簡單易學的使響應式渲染
響應式渲染讓我們使用一種聲明方式，來定義組件的外觀和行為。當數據發生變化時，React在概念上會重新渲染整個用戶界面。React使用DOM在每次狀態數據發生變化時就重新渲染整個用戶界面。
2）使用純JavaScript進行面向的組件開發
三. react的用法
1.HTML模版
首先，在官網https://facebook.github.io/react/中下載最新的壓縮包，react—15.3.1，解壓之後只需將build放到js下即可，然後再 react.js ，react-dom.js，browser.min.js引入到html頁面，react.js是react的核心庫，react_dom.js是提供與DOM相關的功能,browser.min.js是將JSX語法轉換為JavaScript語法，如下所示
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘example‘)
);
</script>
</body>
</html>
2.ReactDom.render是react的最基本用法，用於將模版轉換HTML語言，並將其插入指定的DOM節點。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘example‘) );
上面代碼將一個 h1 標題，插入 example 節點。
四、組件
React 允許將代碼封裝成組件（component），然後像插入普通 HTML 標簽一樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類（查看 demo04）。
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />, document.getElementById(‘example‘) );
上面代碼中，變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。所有組件類都必須有自己的 render 方法，用於輸出組件。
註意，組件類的第一個字母必須大寫，否則會報錯，比如HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標簽，否則也會報錯。
五、this.props.children
this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點（查看 demo05）。
var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );上面代碼的
NoteList組件有兩個span子節點，它們都可以通過this.props.children讀取。
render函數共有三個參數，
1、要渲染的組件，也就是DOM
2、需要被渲染的頁面元素，註意必須使用document.getElement...進行調用
3、渲染成功的回調
react.js