React 与 Antd Pro开发应用

对于后端而言，前端技术也是要会的，后端技术包括go、python、java、php及其相关框架、技术等，前端目前比较流行的有vue，react，angular等，了解这些的好处在于，很多公司内部的系统不要求界面美观，此时就可以由后端人员自行实现，那么就讲讲我学习React的相关经历吧

1 认识React

1 React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI，很多人认为 React 是 MVC 中的 V层。
2 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
3 React 拥有较高的性能，代码逻辑非常简单，使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”，摒弃了原来长时间的内容、样式、动作分离的模式。

2 特点

1 virtual dom树，新旧dom树diff，只渲染变化的DOM元素
2 jsx，合并js和html
3 组件化，项目结构清晰，易于维护
4 单向数据绑定

3 核心概念

1 Component组件
类组件和简单组件

// 类组件
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

//简单组件
const Table = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  )
}

2 Router 数据流向
取

jsx <= model <= service <= server API

存

jsx => model => service => server API

3 Jsx
实现js和html代码的融合
4 Props & state
props 组件初始化设置，react中说的单向数据流值说的就是props，借此实现组件间通信。props本身是不可变的，但是有一种情形它“可变”，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的

state 组件状态，用state来完成对行为的控制、数据的更新、界面的渲染

4 React 与 Antd Pro

如果借助react本身coding，无疑是从零开始，故这里借助Antd Pro脚手架实现
Ant Design Pro 是一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型，出自蚂蚁金服（文档地址：https://pro.ant.design/docs/getting-started-cn）。

其中：
config 路由配置config.js、server api配置
mock 本地mockrouter，数据
public 静态文件
src 核心目录，包括jsx、component、model、service、layout等等
tests 单元测试

一个简单的数据展示需要配置config页面路由、pages jsx页面、model数据查询、service里的server api接口等，下面逐步来实现

1 config路由

 {
    path: '/welcome',
    name: 'Welcome',
    icon: 'smile',
    component: './Welcome',
  },
  {
    path: '/funds',
    name: 'funds',
    icon: 'crown',
    component: './funds'
  },

2 页面层
src/pages/funds 新增index.jsx index.less文件

import React, { Component } from 'react';
import { Table, Space, message, Popconfirm, Pagination } from 'antd';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less';


@connect(({ fundList, loading }) => ({
    fundList,
    loading: loading.models.fundList,
}))

class FundIndex extends Component {

    current = 1
    pageSize = 10
    firstShowEditor = false;

    state = {
        showEditor: false,
        sector: {},
    };

    handleEdit = (item, e) => {
        e.preventDefault();
        
        if (!this.firstShowEditor) {
            this.firstShowEditor = true;
        }

        this.setState({
            showEditor: true,
            sector: item,
        });
    };

    // 定义表格的colum
    columns = [
        {
            title: '基金名称',
            dataIndex: 'Name',
            key: 'Name',
        },
        {
            title: '类型',
            dataIndex: 'Type',
            key: 'Type',
        },
        {
            title: '板块',
            dataIndex: 'Sector_name',
            key: 'Sector_name',
        },
        {
            title: '简介',
            dataIndex: 'Intro',
            key: 'Intro',
        },
    ];

    loadData(current, pageSize) {
        const { dispatch } = this.props;
        dispatch({
            type: 'fundList/fetch',
            payload: {
                page: current,
                page_size: pageSize,
            }, 
        });
    }

    componentDidMount() {
        this.loadData(this.current, this.pageSize);
    };

    render() {
        const {
            fundList: { list, pagination },
            loading,
        } = this.props;

        let paginationProps = {
            pageSize: pagination.pageSize,
            current: pagination.current,
            total: pagination.total,
            showSizeChanger: true,
            showTitle: true,
        };

        return (
            <PageHeaderWrapper>
                <Table
                    loading={loading}
                    dataSource={list}
                    columns={this.columns}
                    rowKey={(record, index) => index}
                    pagination={paginationProps}
                 />
            </PageHeaderWrapper>
        );
    }
};

export default FundIndex;

3 model层

import { queryFund } from '@/services/fund';

const Model = {
    namespace: 'fundList', //唯一

    state: { //定义要返回的数据
        total: 0,
        list: [],
        pagination: []
    },

    effects: {
        * fetch({ payload }, { call, put }) {
            const response = yield call(queryFund, payload);
            yield put({
                type: 'queryList',
                payload: response,
            });
        },
    },

    reducers: {
        queryList(state, action) {
            const { code, data, pagination } = action.payload;
            return {
                ...state,
                list: data,
                pagination: pagination,
            };
        },
    },
};

export default Model;

4 service层
该层会调用后端服务接口，实现数据获取

import request from '@/utils/request';
import { stringify } from 'qs'

export async function queryFund(params) {
    return request(`/api/fund/list?${stringify(params)}`);
}

export async function saveFund(params) {
	return request('/api/fund/save', {
        method: 'POST',
        data: params,
        headers: {
	      'Content-Type': 'application/x-www-form-urlencoded',
	    },
	    requestType: 'form',
    });
}

具体效果如下：

这样就基本实现了从后端服务到前端页面的展示，欢迎一起学习！

参考文档
1 https://pro.ant.design/docs/getting-started-cn
2 https://react.docschina.org/tutorial/tutorial.html