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测试用例：

 1 import React, { Component } from 'react';
 2 import ReactDOM from 'react-dom';
 3 import $ from 'jquery';
 4 import Mock from 'mockjs';
 5 class UserList extends Component {
 6     constructor(props) {
 7         super(props);
 8         this.state = { username: '', age: '' };
 9     }
10     //组件加载完毕后执行              
11     componentDidMount() {
12         $.getJSON(this.props.url, function (res) {
13             this.setState({
14                 username: res['myName'],
15                 age: res['myAge']
16             });
17         }.bind(this));
18     }
19     render() {
20         return (
21             <div>
22                 {this.state.username}==={this.state.age}
23             </div>
24         );
25     }
26 }
27 
28 //------------------------------------Mock------------------------------------
29 //造数据
30 // @name：会自动拼接字符串造人名,非常便利！
31 // |1-100：表示这个范围的随机整数，121表示是数字类型，只要随便给一个数字就ok
32 Mock.mock('http://ajax.data.com', {
33     'myName': 'zhangwei',
34     'myAge|1-100': 121
35 });
36 //----------------------------------------------------------------------------
37 
38 ReactDOM.render(
39     <UserList url="http://ajax.data.com" />, document.getElementById('app')
40 );