ReactJS学习笔记(二)

ReactJS学习笔记(二) 1.Ajax: componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI。 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： 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方法。 posted on 2015-12-02 11:54 jsCoder_洋洋 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/zhuyang/p/5012546.html