React笔记_(5)_react语法4

ajax 数据应用场景

在真实的开发环境中，拿到了产品需求，第一件事不是逼着后台开发人员先完成，然后前端再介入开发，这样太浪费时间。

正确的做法是跟后端人员先商量好接口名称，请求参数，返回的数据格式等，前端人员造数据进入开发，与后端人员并行开发，等后端完成后再接入正式接口。

通常的做法是自己造json数据。但是这种方式也有一些问题。

1.需要安装apache或nginx等容器才行。

2.造个列表页数据很麻烦，很啰嗦。

3.格式容易写错，比如键忘了加引号或者打了个单引号，比如多了反斜杠。。。。。

4.路径不能写成正式接口名称，导致后期还得改好多地方。

5.跨域问题。

mock.js

mock.js不用装任何容器，完全在前端就可以帮我们模拟超真实的接口数据，真的是非常的方便！

http://www.tuicool.com/articles/N7Rjie3

看一下例子吧。不过需要自己安装 mockjs：

npm install mockjs

ajax测试用例：

 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import Mock from 'mockjs';
 class UserList extends Component {
     constructor(props) {
         super(props);
         this.state = { username: '', age: '' };
     }
     //组件加载完毕后执行
     componentDidMount() {
         $.getJSON(this.props.url, function (res) {
             this.setState({
                 username: res['myName'],
                 age: res['myAge']
             });
         }.bind(this));
     }
     render() {
         return (
             <div>
                 {this.state.username}==={this.state.age}
             </div>
         );
     }
 }

 //------------------------------------Mock------------------------------------
 //造数据
 // @name：会自动拼接字符串造人名,非常便利！
 // |1-100：表示这个范围的随机整数，121表示是数字类型，只要随便给一个数字就ok
 Mock.mock('http://ajax.data.com', {
     'myName': 'zhangwei',
     'myAge|1-100': 121
 });
 //----------------------------------------------------------------------------

 ReactDOM.render(
     <UserList url="http://ajax.data.com" />, document.getElementById('app')
 );

源代码说明:点此下载