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')
);

源代码说明:点此下载