同 angularJS拟枚、Vue一樣，React 也是一種替換框架教沾，采用JSX語法進(jìn)行替換
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關(guān)的功能
browser.min.js - 用于將 JSX 語法轉(zhuǎn)為 JavaScript 語法
1、典型用法
入門例子
ReactDOM.render(
Hello, world!
,document.getElementById('example')
);
過程：
I、使用框架 ReactDOM.render 方法操作dom
II腥沽、第一個(gè)參數(shù)時(shí)是 插入的 JSX 語法生成的元素 ；第二個(gè)參數(shù)是綁定 到的DOM的節(jié)點(diǎn)
如果要解析 JSX,則type 要設(shè)定為
JSX：類似 HTML + JS的語法鸠蚪，編譯后進(jìn)行了優(yōu)化今阳，效率更高
2、基礎(chǔ)概念
I茅信、表達(dá)式
ReactDOM.render(
{i == 1 ? 'True!' : 'False'}
,
document.getElementById('example')
);
和 angular和vue不同的是,沒有采用雙括號(hào){{}}, 而使用單括號(hào) {} 取值和表達(dá)式運(yùn)算
II盾舌、邏輯控制
因?yàn)槭穷怘TML的語法,所以沒有設(shè)計(jì) 一些 指令,都是 API操作；事件蘸鲸，也是使用的js 的原生事件妖谴，沒有封裝
React 的 JSX 使用大、小寫的約定來區(qū)分本地組件的類(自定義組件)和 HTML 標(biāo)簽
3酌摇、綁定
同angularJS和Vue不一樣膝舅，React 沒有綁定指令，所以他的綁定窑多，是直接引用和操縱對(duì)象的狀態(tài)(這個(gè)對(duì)象是 state仍稀，具體參照下面關(guān)于state的描述）
4、組件化
I埂息、組件化的例子
var WebSite = React.createClass({
render: function() {
return (
);
}
});
var Name = React.createClass({
render: function() {
return (
{this.props.name}
);
}
});
var Link = React.createClass({
render: function() {
return (
{this.props.site}
);
}
});
React.render(
,
document.getElementById('example')
);
II技潘、組件化的步驟
一、注冊(cè)組件
通過 React.createClass 創(chuàng)建類千康，創(chuàng)建一個(gè) 自定義標(biāo)簽替換規(guī)則
固定屬性 render 返回一個(gè) HTML 模板
二享幽、父控件(外層)向自定義組件(內(nèi)層)傳遞數(shù)據(jù)
I、通過 this.props 傳遞數(shù)據(jù)
通過 getDefaultProps 獲取默認(rèn)數(shù)據(jù)
propTypes 屬性可以校驗(yàn)傳遞的數(shù)據(jù)
II吧秕、操縱狀態(tài)屬性 state
React 把組件看成狀態(tài)機(jī)琉闪，每個(gè)自定義組件,都會(huì)添加一個(gè) state 對(duì)象
通過 this.state 可以獲取state對(duì)象
通過 getInitialState 函數(shù)獲取初始的 state對(duì)象 存儲(chǔ)的數(shù)據(jù)
通過 this.setState 本對(duì)象的方法來設(shè)置 state對(duì)象 存儲(chǔ)的數(shù)據(jù)
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 (
你{text}我。點(diǎn)我切換狀態(tài)砸彬。
);
}
});
React.render(
,
document.getElementById('example')
);
state VS props
props 傳遞數(shù)據(jù)給子組件颠毙，不可變；state 因?yàn)榭勺兩暗铮梢院陀脩艚换?/p>
同angularJS和Vue相比蛀蜜，
5、組件 API 與生命周期
設(shè)置狀態(tài)：setState
替換狀態(tài)：replaceState
設(shè)置屬性：setProps
替換屬性：replaceProps
強(qiáng)制更新：forceUpdate
獲取DOM節(jié)點(diǎn)：findDOMNode
判斷組件掛載狀態(tài)：isMounted
Mounting - 已經(jīng)插入DOM
Updating - 正在重新渲染
Unmounint - 移除DOM
生命周期的方法 - 回調(diào)函數(shù)
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
6增蹭、ref 屬性
這個(gè)和 vue的 el屬性類似滴某，可以獲取整個(gè)元素，這樣可以方便的操作元素
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 獲取焦點(diǎn)
this.refs.myInput.focus();
},
render: function() {
// 當(dāng)組件插入到 DOM 后，ref 屬性添加一個(gè)組件的引用于到 this.refs
return (
type="button"
value="點(diǎn)我輸入框獲取焦點(diǎn)"
onClick={this.handleClick}
/>
);
}
});
ReactDOM.render(
,
document.getElementById('example')
);
I霎奢、在需要操作的元素上户誓，綁定 ref 屬性
II、通過 react 組件對(duì)象的 this.refs 獲取綁定的這個(gè)屬性
后續(xù)可以對(duì)獲取的元素幕侠，進(jìn)行操作
7帝美、綜合應(yīng)用
I、通過 state 屬性晤硕，實(shí)現(xiàn)雙向數(shù)據(jù)綁定 - 針對(duì)表單
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
{value}
;
}
});
ReactDOM.render(
,
document.getElementById('example')
);
a悼潭、通過原生事件 onchange 監(jiān)聽，指定監(jiān)聽函數(shù) handleChange
b舞箍、在監(jiān)聽事件 中 調(diào)用 this.setState 更新綁定數(shù)據(jù) (通過event可以獲取各種數(shù)據(jù))
II舰褪、通過 state 和 props 屬性，實(shí)現(xiàn) 內(nèi)層觸發(fā)外層更新數(shù)據(jù)
var Content = React.createClass({
render: function() {
return
點(diǎn)我
{this.props.myDataProp}
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: '菜鳥教程'})
},
render: function() {
var value = this.state.value;
return
updateStateProp = {this.handleChange}>
;
}
});
ReactDOM.render(
,
document.getElementById('example')
);
a疏橄、通過原生事件 onClick 監(jiān)聽占拍，指定監(jiān)聽函數(shù) 為外層傳遞來的 屬性 this.props.updateStateProp
b、外層傳遞到內(nèi)層的 屬性 updateStateProp 指定為自身的監(jiān)聽事件 this.handleChange
c软族、外層監(jiān)聽事件 中 調(diào)用 this.setState 更新綁定數(shù)據(jù) (通過event可以獲取各種數(shù)據(jù))
外層傳遞到內(nèi)層的 屬性 updateStateProp
III刷喜、結(jié)合 ajax 請(qǐng)求残制，更新UI
React 組件的數(shù)據(jù)可以通過 componentDidMount 方法中的 Ajax 來獲取立砸，當(dāng)從服務(wù)端獲取數(shù)據(jù)庫可以將數(shù)據(jù)存儲(chǔ)在 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) 是因?yàn)?function 里面使用了 this.setState,此時(shí)的this 指針并沒有指向外層的class對(duì)象颗祝，.bind()創(chuàng)建了一個(gè)新函數(shù)(原先函數(shù)的拷貝)，當(dāng)這個(gè)函數(shù)在被調(diào)用的時(shí)候恼布，它的 this 關(guān)鍵詞會(huì)被設(shè)置成被傳入的值（這里指調(diào)用bind()時(shí)傳入的參數(shù)）
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
{this.state.username} 用戶最新的 Gist 共享地址：
);
}
});
ReactDOM.render(
{/* */}
,
mountNode
);
