ReactJS学习笔记(二)
1.Ajax: componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI。
/*demo1*/
var Demo1Box=React.createClass({
getInitialState:function(){
return{
username:'',
lastGistUrl:''
};
},
componentDidMount:function(){
$.get(this.props.url,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}
<a href={this.state.lastGistUrl}>here</a>
</div>
)
}
});
ReactDOM.render(
<Demo1Box url="https://api.github.com/users/octocat/gists" />,
document.getElementById('demo1')
);
2.利用promise实现ajax（！因为promise是异步的，所以render时要检测）
html：<div id='demo2'></div>
JS：
/*demo2*/
var Demo2Box=React.createClass({
getInitialState:function(){
return {data: null};
},
componentDidMount:function(){
this.props.promise.then(
value => this.setState({ data: value})
);
},
render:function(){
console.log(1);
console.log(this.state.data);
console.log(2);
if(this.state.data){
console.log(1);
console.log(this.state.data);
console.log(2);
console.log(this.state.data.items);
var items=this.state.data.items;
var datalist=items.map(function(items){
return (
<li>
{items.html_url},
{items.name}
</li>
)
});
return (
<ul>
{datalist}
</ul>
);
}
return (
<ul>
</ul>
);
}
});
ReactDOM.render(
<Demo2Box promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
document.getElementById('demo2')
);
3.组件间回调函数
html：<div id='demo3'></div>
JS：
var Demo31Box=React.createClass({
render:function(){
return(
<button onClick={this.props.clickCallback}>点我获取全名</button>
)
}
});
var Demo32Box=React.createClass({
getFullName:function(){
alert("全名是lili");
},
render:function(){
return (
//调用外部组件并传递回调方法
<Demo31Box clickCallback={this.getFullName} />
)
}
});
ReactDOM.render(
<Demo32Box />,
document.getElementById('demo3')
);
4.Mixins，将Mixins对象上的方法混合到另一个调用的组件，作用和$.extend方法的作用相似。Mixins对象有几个特点：
1. )在mixin中写的生命周期相关的回调都会被合并，也就是他们都会执行，而不会互相覆盖掉。会先执行 mixin ，最后执行组件的 。
2.）mixin没有render方法。