一樓給敬佩的阮老師
引入原則：
<head>
<script src='../build/react.js></script>
<script src='../build/react-dom.js></script>
<script src='../build/browser.min.js></script>
</head>
body區(qū)域
<div id='example'></div>
<script type='text/bable'>
//**our codes goes here!
</script>
實(shí)際上線用babel進(jìn)行轉(zhuǎn)換
bable src --out-dir build
ReactDOM.render()
示例：
ReactDOM.render(
<h1>hello world!</h1>,
document.getElementById('example');
)
JSX語法
var names =['Alice','Emily','Kate'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>Hello,{name}!</div>
})
}
</div>,
document.getElementById('example')
);
JSX允許在模板中直接插入JavaScript變量
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
組件
React.createClass用于生成一個(gè)組件類
var HelloMessage = React.creatClass({
render:function(){
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name='john' />,
document.getElementById('example')
);
- 組件的第一個(gè)字母必須大寫
- 組件只能包含一個(gè)頂層標(biāo)簽
- class屬性需要寫成className
this.props.children
this.props.children 表示組件所有的子節(jié)點(diǎn)
var NoteList = React.createClass({
render:function(){
return(
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<NoteList>
<span>hello</span>
<span>World</span>
</NoteList>,
document.body
);
使用React.Children.map來遍歷子節(jié)點(diǎn)蚪缀，不用擔(dān)心this.props.children的數(shù)據(jù)類型
PropTypes
驗(yàn)證實(shí)例的屬性是否符合要求
var MyTitle = react.createClass({
propTypes:{
title:React.PropTypes.string.isRequired,
},
render:function(){
return <h1>{this.props.title}</h1>
}
});
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.body
);
getDefaultProps可以用來設(shè)置組件屬性的默認(rèn)值
getDefaultProps:function(){
return {
title: 'Hello World'
};
}
獲取真實(shí)的DOM節(jié)點(diǎn)
有時(shí)需要從組件中獲取真實(shí)的DOM節(jié)點(diǎn)慢蜓，需要用到ref屬性碌奉。
var MyComponet = React.CreatClass({
handleClick:function(){
this.refs.myTextInput.focus();
},
render:function(){
return (
<div>
<input type='text' ref='myTextInput' />
<input type='button' value ='Focus the text input'
onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponet />,
document.getElementById('example')
);
指定click事件回調(diào)函數(shù)拒贱，確保DOM真實(shí)渲染后觸發(fā)，除此還支持KeyDown等事件
this.state
組件視為狀態(tài)機(jī)，用戶互動(dòng)，狀態(tài)變化妨猩，重新渲染UI。
var LikeButton = React.CreatClass({
getInitialState:function(){
return {liked:false};
},
handleClick:function(event){
this.setState({liked: !this.state.liked});
},
render:function(){
var text = this.state.liked? 'like':'haven\'t liked';
return(
<p onClicked={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDom.render(
<LikeButton />,
document.body
);
this.props表示一旦定義不再更改的屬性秽褒，this.state表示隨用戶互動(dòng)產(chǎn)生變化的特性壶硅。
表單
var Input = React.createClass({
getInitialState:function(){
return {value:'Hello!'};
},
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} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input />,document.body);
這里取得輸入框的值沒有使用this.props.value,選用了event.target.value。
組件的生命周期
- Mounting: 已插入真實(shí)DOM
- Updating: 正在被重新渲染
- Unmounting:已移除真實(shí)DOM
var Hello = React.createClass({
getInitialState:function()
return {
opacity:1.0
}
},
compontentDidMount:function(){
this.timer = setInterval (function() {
var opacity = this.state.opacity;
opacity -= .05;
if(opacity < 0.1){
opacity = 1.0;
}
this.setState({
opacity:opacity
});
}.bind(this),100);
},
render: function(){
return (
<div style = {{opacity:this.state.opacity}}>
Hello {{this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name='world' />,
document.body
);
bind(this)——原生JS寫法销斟。
Ajax
使用compontentDidMount方法設(shè)置Ajax請(qǐng)求
var UserGist = React.createClass({
getInitialState:function(){
return {
username:'',
lastGistUrl:''
}
},
componentDidMount: function(){
$.get(this.props.source,function(result){
var lastGist = result[0];
if(this.isMounted()){
this.setState({
username:lastGist.owner.login,
lastGistUrl:lastGist.html_url
});
}
}.bind(this));
},
render:function(){
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source = 'http:xx.xxx.com' />,
document.body
);
把其他途徑獲取的對(duì)象傳入組件
ReactDOM.render(
<RepoList promise = {$.getJSON('http://xx.xxx.com)} />,
document.body
);
var RepoList = React.createClass({
getInitialState: function(){
return { loading:true, error : null , data : null}
},
componentDidMount(){
this.props.promise.then(
value => this.setState({loading:false,data:value}),
error => this.setState({loading:false,error:error}));
},
render:function(){
if(this.state.loading){
return <span>Loading…</span>
}
else if(this.state.error !== null){
return <span>Error: {this.state.error.message}</span>;
}
else{
var repos = this.state.data.items;
var reposList = repos.map(function(repo){
return (
<li>
<a href={repo.html}>{repo.name}</a>
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>
{repoList}
</ol>
</main>
);
}
}
});
