数据加载现在在JS 上都会使用Promise的模式(http://www.infoq.com/cn/news/2011/09/js-promise) , 而React 对于数据的载入重点不是你用什么方法去利用Promise模式去加载数据。更多是关心你的数据是怎么触发数据页面的DOM元素的变化。在该系列文章的第二篇也有提及几个名JSX, State,Props都是React中数据加载后影响的几个元素。
我们来看看State变化时的一些细节,触发DOM元素的变化是在ComponnetDidUpdate()方法内,这里通过SetState去触发重新的render()
///<reference path="../typings/jquery/jquery.d.ts" /> ///<reference path="../typings/bluebird/bluebird.d.ts" /> module ReactDemo.Utils { export class DataService{ getCatalogList() : Promise<string>{ var url = '/api/values'; return this.getPromise(url); } private getPromise(api: string): Promise<string> { return new Promise((resolve: (result: string) => void, reject: (error: string) => void): void => { $.ajax(<JQueryAjaxSettings>{ url: api, cache: false, dataType: "json", type: "GET", success: resolve.bind(this), error: (jqXHR: JQueryXHR, status: string, message: string) => { reject(`status[${status}] message[${message}]`); } }); }); } } }
interface CatalogItemProps { data : any; } class CatalogItem extends React.Component<CatalogItemProps,any>{ constructor(props : CatalogItemProps){ super(props); } public render() { return (<div> <div className="goods"> <a href="#"> <div className="goods-img"> <img src="images/goods/good.jpg" alt="" /> <span className="goods-mark"> <span className="goods-discount">{this.props.data.catalogGroupPrice}折</span> <span className="customers-num">{this.props.data.catalogGroup}人团</span> </span> </div> <h2>{this.props.data.catalogName}</h2> <p className="outline">{this.props.data.catalogIntro}</p> <div className="goods-go"> <div className="goods-go-icon"></div> <div className="goods-go-price"> <span>{this.props.data.catalogGroup}人团</span> <b>¥{this.props.data.catalogGroupPrice}</b> </div> <div className="goods-go-btn">去开团</div> </div> </a> </div> </div>); } }而CatalogList 如下:
interface CatalogListState { list : any ; } interface CatalogListProps { } class CatalogList extends React.Component<CatalogListProps,CatalogListState>{ public state : CatalogListState ; constructor(props : CatalogListProps){ super(props); this.state = {list : []}; } public componentDidMount: () => void = (): void => { var dataService = new ReactDemo.Utils.DataService(); var dataList; dataService.getCatalogList().then((result:string)=>{ this.setState({list:result}); }); } public render() { var catalogs; if(this.state.list){ catalogs = this.state.list.map(function(catalog){ return (<div> <CatalogItem data={catalog}/> </div>); }); } return (<div> <div id="goods-list"> {catalogs} </div> </div>); } }关于CatalogList需要注意的地方是你必须判断state中list是否有效否则会出错,所以if(this.state)是不能缺少的,否则出错,其次不要忘记componentDidMount才能触发this.setState(....)
好就说到这里,明天我们谈flux