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