*通過(guò)createElement創(chuàng)建元素 HELLO Word
var el=React.createElement(type,[props],[children...]) 標(biāo)簽 屬性 內(nèi)容
React.render(el,document.getElementById("..."))
*虛擬DOM
在虛擬DOM上操作 通過(guò)render來(lái)掛載到真實(shí)的DOM
組件
React.createClass(meta)
內(nèi)部需要render函數(shù)
*JSX
JSX是對(duì)JavaScript語(yǔ)法的擴(kuò)展瓶颠，它讓我們可以在JavaScript代碼中以類似HTML 的方式創(chuàng)建React元素。
var Jsxdemo=React.createClass({
render:function(){
var html=<div>
<div className="ez-led">Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">我是第三排</div>
</div>;
return html;
}
JSX 能讓我們像是拼寫字符串一樣去寫HTML颁独、
*props
props 稱之為 無(wú)狀態(tài)組件 組件的表現(xiàn)都是通過(guò)外部傳入的props屬性 根據(jù)自身的狀態(tài)來(lái)做出不同的反應(yīng)
var Jsxdemo=React.createClass({
render:function(){
var number=this.props.setid;
alert(number); 這里能直接輸出對(duì)象里的漢字
var style={
"color":"red",
"fontSize":"12px"http://這里是要求內(nèi)聯(lián)樣式需要按照駝峰寫法去寫
}
var html=<div>
<div className="ez-led" style={style}>Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">我是第三排</div>
</div>;
return html;
}
});
ReactDOM.render(<Jsxdemo setid="11"/>,document.getElementById("jsxdemobox"));
*內(nèi)聯(lián)樣式
var Jsxdemo=React.createClass({
render:function(){
var style={
"color":"red",
"fontSize":"12px"http://這里是要求內(nèi)聯(lián)樣式需要按照駝峰寫法去寫
}
var html=<div>
<div className="ez-led" style={style}>Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">我是第三排</div>
</div>;
return html;
}
});
*state 狀態(tài)機(jī)
state - 組件的狀態(tài)變量 保存組件的當(dāng)前狀態(tài)，可以再任何時(shí)候通過(guò)this.state來(lái)獲取到當(dāng)前狀態(tài)
getInitialState() - 設(shè)置組件初始狀態(tài)
setState(currentState) - 設(shè)置組件當(dāng)前狀態(tài) 會(huì)重新渲染
//getInitialState方法來(lái)設(shè)置初始化狀態(tài) 也就是設(shè)置我們的 state {key:value} 其中key代表state指向的狀態(tài)變量 value代表狀態(tài)
getInitialState : function(){
return {open : true};
},
//這里是通過(guò)一個(gè)點(diǎn)擊事件來(lái)重新設(shè)定狀態(tài)機(jī) 必須要通過(guò)this.setState({option:!this.state.open}) 意思就是設(shè)置狀態(tài)機(jī)的另一種狀態(tài)
onClick : function(){
//讀取并重設(shè)狀態(tài)苹粟，這將觸發(fā)重新渲染
this.setState({open : !this.state.open});
},
//在render來(lái)操控我們的虛擬DOM 記得return HTML代碼
render : function(){
//根據(jù)狀態(tài)設(shè)置樣式
img = this.state.open ? "img/switch-on.png" : img = "img/switch-off.png";
//返回元素
return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>;
}
- 生命周期
componentWillMount() - 組件實(shí)例即將掛接（初次渲染）時(shí)被調(diào)用
這個(gè)方法在整個(gè)生命周期中只會(huì)被調(diào)用一次驱闷。
componentDidMount() - 組件實(shí)例掛接（初次渲染）后被調(diào)用
這個(gè)方法在整個(gè)生命周期中只會(huì)被調(diào)用一次。
componentWillReceiveProps(nextProps) - 組件實(shí)例即將設(shè)置新屬性時(shí)被調(diào)用
參數(shù)nextProps表示即將應(yīng)用到組件實(shí)例上的新屬性值凶杖。
這個(gè)方法在初次渲染時(shí)不會(huì)被調(diào)用瓦糕。在此方法內(nèi)調(diào)用setState()不會(huì)引起重新渲染底洗。
shouldComponentUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時(shí)被調(diào)用
參數(shù)nextProps傳入即將應(yīng)用到組件實(shí)例上的新屬性值，參數(shù)nextState傳入組件實(shí)例即將被 設(shè)置的狀態(tài)值咕娄。如果這個(gè)方法返回false亥揖，那么組件實(shí)例就不會(huì)被重新渲染。除非我們明確地 知道圣勒，新的屬性和狀態(tài)不需要進(jìn)行重新渲染费变，否則這個(gè)方法都應(yīng)該返回true。
這個(gè)方法在初次渲染時(shí)或通過(guò)forceUpdate()方法進(jìn)行渲染時(shí)不會(huì)被調(diào)用圣贸。
componentWillUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時(shí)被調(diào)用
這個(gè)方法在初次渲染時(shí)不會(huì)被調(diào)用挚歧。注意：不能在此方法內(nèi)調(diào)用setState()。
componentDidUpdate(prevProps, prevState) - 組件實(shí)例重新渲染后被調(diào)用
這個(gè)方法在初次渲染時(shí)不會(huì)被調(diào)用吁峻。
componentWillUnmount() - 組件實(shí)例即將從DOM樹移除時(shí)被調(diào)用
這個(gè)方法在整個(gè)生命周期中只會(huì)被調(diào)用一次滑负。
(訪問DOM v0.14 版中 refs 指向的就是 DOM 節(jié)點(diǎn)，同時(shí)也會(huì)保留 .getDOMNode() 方法（帶 warning）锡搜，最終在 v0.15 版中去除該方法橙困。)
首先要給你想獲得DOM對(duì)象設(shè)定 ref=“q” ref 必須是全局唯一的
var el = React.findDOMNode(this.refs.q),
this.refs.q獲取到的是虛擬DOM瞧掺，在render方法執(zhí)行之后耕餐，并且react已經(jīng)完成了DOM的更新，才能通過(guò) this.refs.city.getDOMNode() 來(lái)拿到原生的DOM元素辟狈。
使用 this.refs.xxx.getDOMNode() 或React.findDOMNode(this.refs.xxx) 可以獲取到真正的 DOM 節(jié)點(diǎn)肠缔。
// 之前：
// var input = this.refs.giraffe.getDOMNode();
//
// v0.14 版：0.15版本以后
var input = this.refs.giraffe;
alert(input.value);
*表單
文本輸入框
不要使用value屬性設(shè)置文本輸入框元素的初值，應(yīng)當(dāng)使用defaultValue：
//JSX
<input type ="text" defaultValue ="demo"/>
復(fù)選按鈕
不要使用checked屬性設(shè)置復(fù)選按鈕的初始選中狀態(tài)哼转，應(yīng)當(dāng)使用defaultChecked：
//JSX
<input type ="checkbox" defaultChecked/>
單選按鈕組
不要使用option元素的selected屬性設(shè)置單選按鈕組的初始選中狀態(tài)明未，應(yīng)當(dāng)使用 select元素的defaultValue：
//JSX
<select defaultValue="A">
<option value="A">China</option>
<option value="B">India</option>
<option value="C">Japan</option>
</select>
*容器組件
在ReactDOM.render里面 ，組件要成雙標(biāo)簽 {this.props.children}用于獲取到我們的React的 子元素
ReactDOM.render(<Jsxdemo setid="11">我是容器組件</Jsxdemo>,document.getElementById("jsxdemobox"));
var Jsxdemo=React.createClass({
componentDidMount:function(){
var message=this.refs.bbbb;
// alert(message.value);
},
render:function(){
var number=this.props.setid;
// alert(number);
var style={
"color":"red",
"fontSize":"12px"http://這里是要求內(nèi)聯(lián)樣式需要按照駝峰寫法去寫
}
var html=<div>
<div className="ez-led" style={style}>{this.props.children}</div>
<div className="ez-led" ref="aaaa">2015-04-15</div>
<input type="text" className="ez-led" ref="bbbb" defaultValue="我是第三排"/>
</div>;
return html;
}
});
ReactDOM.render(<Jsxdemo setid="11">我是容器組件</Jsxdemo>,document.getElementById("jsxdemobox"));
*JSX可展開屬性
我們可以再render里面
<div className="ez-slider" onMouseDown ={this.onMouseDown} onMouseMove ={this.onMouseMove} onMouseUp ={this.onMouseUp}/>
相等于
var props ={
className :"ez-slider",
onMouseDown :this.onMouseDown,
onMouseUp :this.onMouseUp,
onMouseMove :this.onMouseMove
};
//傳入屬性包
var rel =<div {...props}></div>;
var Jsxdemo=React.createClass({
// getInitialState:function(){
// },
componentDidMount:function(){
var message=this.refs.bbbb;
// alert(message.value);
},
onClick:function(){
alert(0);
},
render:function(){
var number=this.props.setid;
// alert(number);
var style={
"color":"red",
"fontSize":"12px"http://這里是要求內(nèi)聯(lián)樣式需要按照駝峰寫法去寫
}
var options={
className:"ez-led",
onClick:this.onClick
}
var newhtml=<div {...options}>22222</div>;
return newhtml;
}
});
ReactDOM.render(<Jsxdemo setid="11">我是容器組件</Jsxdemo>,document.getElementById("jsxdemobox"));
動(dòng)畫 CSS3 transition 思路就是利用狀態(tài)機(jī)來(lái)判斷 DOM狀態(tài)
為元素聲明transition樣式
設(shè)置屬性初始值壹蔓，第一次渲染元素
設(shè)置屬性目標(biāo)值趟妥，第二次渲染元素
*默認(rèn)屬性
getDefaultProps:是設(shè)置默認(rèn)屬性 紅色為相關(guān)代碼
如果設(shè)置了value 則 彈出 10 如果沒有設(shè)置 則 彈出 20
var ZZ=React.createClass({
getDefaultProps:function(){
return {
value:20
}
},
onClick:function(){
alert(0);
},
render:function(){
alert(this.props.value);
var option={
className:"maincsss",
onClick:this.onClick
}
var html=<div {...option}>111111</div>;
return html;
}
});
ReactDOM.render(<ZZ value="10"/>,document.getElementById("mainbox"));
mixin復(fù)用代碼 meisen發(fā)音 混合柔和的意思 專門用來(lái)寫公共模塊的對(duì)象 并且通過(guò)minxins指向您的 mixin對(duì)象 來(lái)拷貝你的React組件中
varEzLoggerMixin={
log:function(){
//sth. happened here.
}
};
React.createClass({
mixins:[EzLoggerMixin],
render:function(){
//your render stuff.
}
});
//mixin就是存放公共能力的一個(gè)簡(jiǎn)單的對(duì)象而已。首字母可不大寫 但是為了養(yǎng)成習(xí)慣 首字母還是大寫的好 哦
var Minxintext={
log:function(){
alert("我是mixin");
}
};
mixins : [Minxintext],
然后在React實(shí)例里面的生命周期或者事件函數(shù)里面 通過(guò) this. 你定義的mixin對(duì)象內(nèi)部的函數(shù)
var Minxintext={
log:function(){
alert("我是mixin");
}
};
var ZZ=React.createClass({
mixins : [Minxintext],
getDefaultProps:function(){
return {
value:20
}
},
onClick:function(){
this.log();
},
render:function(){
// alert(this.props.value);
var option={
className:"maincsss",
onClick:this.onClick
}
var html=<div {...option}>111111</div>;
return html;
}
});
ReactDOM.render(<ZZ value="10"/>,document.getElementById("mainbox"));
map 循環(huán)
return (
<span>
{
datas.map(function(i){
return <span {...option} key={i.id}>我是{i.name}a a a </span>;
})
}
</span>
)
