React 的開發(fā)準(zhǔn)備：
<!DOCTYPE html>
<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">
// ** Our code goes here! **
</script>
</body>
</html>
React 開發(fā)用到的庫有：
- react.js 是React 的核心庫
- react-dom.js 是提供與DOM相關(guān)的功能
- Browser.js 的作用是將JSX語法轉(zhuǎn)為JavaScript語法。
React 的基本語法：
React 對象：是React庫的入口梳侨。
下面是一些常見的API:
createElement:定義一個(gè)虛擬dom
React.createElement(參數(shù)一蛉威，參數(shù)二，參數(shù)三);
- 參數(shù)一：表示虛擬dom的名稱（可以是任意元素的名稱走哺，也可以是一個(gè)組件的名稱）
- 參數(shù)二：表示虛擬dom的一些必要的屬性（比如：id, className, title等）
- 參數(shù)三：表示虛擬dom的子元素 （若是文本節(jié)點(diǎn)瓷翻，可以直接書寫，不必書寫createElement）
var ul = React.createElement(
'ul',
null,
React.createElement('li', null, '男士'),
React.createElement('li', null, '女士')
)
React.createClass:創(chuàng)建一個(gè)組件類
React.createClass({對象});
- 參數(shù)是一個(gè)對象割坠，對象的屬性或方法是對組件的說明。
- 有個(gè)必要方法render：將虛擬dom樹輸出
- 組件類的名字第一個(gè)字母必須大寫妒牙。
- 組件類只能包含一個(gè)頂層標(biāo)簽彼哼，否則也會報(bào)錯(cuò)。
var Uls = React.createClass({
render: function(){
return(
<ul>
<li>男裝</li>
<li>女裝</li>
</ul>
)
}
});
ReactDOM.render(<Uls><Uls>, document.getElementById('example'));
ReactDom對象: 操作dom
ReactDOM.render 方法: 是將虛擬dom渲染到頁面
ReactDom.render(參數(shù)一湘今，參數(shù)二敢朱，參數(shù)三);
- 第一個(gè)參數(shù)：表示虛擬dom
- 第二個(gè)參數(shù)：表示真實(shí)dom容器元素
- 第三個(gè)參數(shù)：表示一個(gè)回調(diào)函數(shù)
其他語法
JSX中插值
插值：向虛擬DOM中動態(tài)的插值(可以插入元素內(nèi)容中，也可以插入元素屬性中)
語法：大括號{}
var Header = React.createClass({
render: function(){
var name = 'Jack';
var oDate = new Date();
return (
<div>
<span>{name}</span>
<span>{oDate.getHours() > 12 ? '下午好':'上午好'}</span>
</div>
);
}
});
ReactDOM.render(<Header></Header>,document.getElementById('example'));
注意點(diǎn)：
- JSX中 不能使用if else語句摩瞎，但是可以使用三元運(yùn)算表達(dá)式來代替拴签。
- JSX中 注釋需要寫在花括號中。
列表渲染
JSX 遇到數(shù)組旗们，會自動展開所有成員
var List = React.createClass({
createLi: function() {
var arr = ['蘋果’, '梨', '橘子'];
return arr.map(function(index, value){
return (<li>{value}</li>);
});
},
render: function() {
return (
<ul>{this.createLis()}</ul>
);
}
});
React.render(<List></List>, document.getElementById('example'));
兩個(gè)描述性的屬性
Props 屬性：
props 是在組件創(chuàng)建時(shí)候提供的蚓哩，往往是不會更改的。
獲取屬性：this.props
設(shè)置默認(rèn)屬性：getDefaultProps
var List = React.createClass({
getDefaultProps: function() {
return {
titleData: ['默認(rèn)標(biāo)題']
};
},
getTitle: function(){
return this.props.titleData.map(function(value, index){
return (
<li key={index}>{value}</li>
);
});
},
render: function(){
return (
<ul>{this.getTitle()}</ul>
);
}
});
ReactDOM.render(<List titleData={['北京','天津']}></List>, document.getElementById('example'));
State狀態(tài)上渴，
組件內(nèi)部維護(hù)的一個(gè)數(shù)據(jù)岸梨，通常在組件發(fā)生交互時(shí)候發(fā)生改變。
獲取屬性：this.state
設(shè)置默認(rèn)屬性：getInitialState
改變狀態(tài)：this.setState
var Nav =React.createClass({
changeNav: function() {
this.setState({
num: this.state.num+1
});
},
getInitialState: function(){
return {
num : 0
}
},
render: function(){
return (
<div>
<ul>
<li style={{display: this.state.num % 3 == 0 ? 'block' : 'none'}}>111 111 111</li>
<li style={{display: this.state.num % 3 == 1 ? 'block' : 'none'}}>222 222 222</li>
<li style={{display: this.state.num % 3 == 2 ? 'block' : 'none'}}>333 333 333</li>
</ul>
<span onClick={this.changeNav}>換一換</span>
</div>
);
}
});
ReactDOM.render(<Nav></Nav>, document.getElementById('header'));
State 與 props 比較
相同點(diǎn)：在改變的時(shí)候稠氮，都會觸發(fā)render函數(shù)
區(qū)別：props 是在組件創(chuàng)建時(shí)候提供的曹阔，往往是不會更改的；state 在組件發(fā)生交互的時(shí)候改變隔披。
