同 angularJS、Vue一樣，React 也是一種替換框架，採用JSX語法進行替換
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
browser.min.js - 用於將 JSX 語法轉爲 JavaScript 語法
1、典型用法
入門例子
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
過程：
I、使用框架 ReactDOM.render 方法操作dom
II、第一個參數時是 插入的 JSX 語法生成的元素 ；第二個參數是綁定 到的DOM的節點
如果要解析 JSX,則type 要設定爲 <script type="text/babel">
JSX：類似 HTML + JS的語法，編譯後進行了優化，效率更高
2、基礎概念
I、表達式
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
和 angular和vue不同的是,沒有采用雙括號{{}}, 而使用單括號 {} 取值和表達式運算
II、邏輯控制
因爲是類HTML的語法,所以沒有設計 一些 指令,都是 API操作；事件，也是使用的js 的原生事件，沒有封裝
React 的 JSX 使用大、小寫的約定來區分本地組件的類(自定義組件)和 HTML 標籤
3、綁定
同angularJS和Vue不一樣，React 沒有綁定指令，所以他的綁定，是直接引用和操縱對象的狀態(這個對象是 state，具體參照下面關於state的描述）
4、組件化
I、組件化的例子
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
React.render(
<WebSite name="菜鳥教程" site=" http://www.runoob.com" />,
document.getElementById('example')
);
II、組件化的步驟
一、註冊組件
通過 React.createClass 創建類，創建一個 自定義標籤替換規則
固定屬性 render 返回一個 HTML 模板
二、父控件(外層)向自定義組件(內層)傳遞數據
I、通過 this.props 傳遞數據
通過 getDefaultProps 獲取默認數據
propTypes 屬性可以校驗傳遞的數據
II、操縱狀態屬性 state
React 把組件看成狀態機，每個自定義組件,都會添加一個 state 對象
通過 this.state 可以獲取state對象
通過 getInitialState 函數獲取初始的 state對象 存儲的數據
通過 this.setState 本對象的方法來設置 state對象 存儲的數據
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜歡' : '不喜歡';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。點我切換狀態。
</p>
);
}
});
React.render(
<LikeButton />,
document.getElementById('example')
);
state VS props
props 傳遞數據給子組件，不可變；state 因爲可變，可以和用戶交互
同angularJS和Vue相比，
5、組件 API 與生命週期
設置狀態：setState
替換狀態：replaceState
設置屬性：setProps
替換屬性：replaceProps
強制更新：forceUpdate
獲取DOM節點：findDOMNode
判斷組件掛載狀態：isMounted
Mounting - 已經插入DOM
Updating - 正在重新渲染
Unmounint - 移除DOM
生命週期的方法 - 回調函數
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
6、ref 屬性
這個和 vue的 el屬性類似，可以獲取整個元素，這樣可以方便的操作元素
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 獲取焦點
this.refs.myInput.focus();
},
render: function() {
// 當組件插入到 DOM 後，ref 屬性添加一個組件的引用於到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="點我輸入框獲取焦點"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
I、在需要操作的元素上，綁定 ref 屬性
II、通過 react 組件對象的 this.refs 獲取綁定的這個屬性
後續可以對獲取的元素，進行操作
7、綜合應用
I、通過 state 屬性，實現雙向數據綁定 - 針對表單
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
a、通過原生事件 onchange 監聽，指定監聽函數 handleChange
b、在監聽事件 中 調用 this.setState 更新綁定數據 (通過event可以獲取各種數據)
II、通過 state 和 props 屬性，實現 內層觸發外層更新數據
var Content = React.createClass({
render: function() {
return <div>
<button onClick = {this.props.updateStateProp}>點我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: '菜鳥教程'})
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
a、通過原生事件 onClick 監聽，指定監聽函數 爲外層傳遞來的 屬性 this.props.updateStateProp
b、外層傳遞到內層的 屬性 updateStateProp 指定爲自身的監聽事件 this.handleChange
c、外層監聽事件 中 調用 this.setState 更新綁定數據 (通過event可以獲取各種數據)
外層傳遞到內層的 屬性 updateStateProp
III、結合 ajax 請求，更新UI
React 組件的數據可以通過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據庫可以將數據存儲在 state 中，再用 this.setState 方法重新渲染 UI。
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
// 這裏的 bind(this) 是因爲 function 裏面使用了 this.setState,此時的this 指針並沒有指向外層的class對象，.bind()創建了一個新函數(原先函數的拷貝)，當這個函數在被調用的時候，它的 this 關鍵詞會被設置成被傳入的值（這裏指調用bind()時傳入的參數）
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.username} 用戶最新的 Gist 共享地址：
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});
ReactDOM.render(
{/* */}
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);