ReactJS

最流行的前端框架

umi安装

# 安装nodeJS
# 安装tyarn，加快下载速度
npm i yarn tyarn -g
# 安装umi
tyarn global add umi

初始化

# 生成package.json文件
tyarn init -y

# 项目中添加umi的依赖
tyarn add umi --dev

# 在config目录下创建config.js配置umi
export default {};

# 添加React插件
tyarn add umi-plugin-react --dev

# 在config.js中引入
export default {
plugins: [ 
    ['umi-plugin-react', { 
        }] 
    ]
}

#启动服务
umi dev

# 构建和部署
umi build

umi结构

JSX语法

JSX语法就是可以在js文件中插入HTML片段
JSX语法可以被Babel转码工具进行转码
JSX中所有的标签必须是闭合的并且只能有一个根标签

export default () => {
    const t = () => "world";
    // 获取元素使用 { }
    return <div>hello { t() }</div>;
}

组件

创建组件

import React from 'react';

class Test extends React.Component {
    render() {
        return (
            // this.props.name代表传入的参数
            // this.props.children代表标签中包裹的内容
            <div>
            Test组件 
            name = {this.props.name}  
            内容 = {this.props.children}
            </div>
        )
    }
}

export default Test;

使用组件

import React from 'react';
import Test from './Test';

class Show extends React.Component {
    render() {
        return (
            // 引用组件，传递参数，标签包裹内容
            <Test name="极客小祥">标签包裹的内容</Test>
        );
    }
}
export default Show;

组件状态

每一个组件都有一个状态，保存在this.state中，当状态的值发生改变时，React框架会自动调用render()方法

this.state值的设置要在构造函数中设置
要修改this.state中的值，需要调用this.setState()完成

import React from 'react';

class List extends React.Component {
    constructor(props) {
        // 调用父类的构造
        super(props);
        this.state = {
            dataList: [1, 2, 3],
            maxNum: 3
        }
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.dataList.map((value, index) => {
                            return <li key={index}>{value}</li>;
                        })
                    }
                </ul>
                <button onClick={
                    () => {
                        // 获取最大值加1
                        let newMaxNum = this.state.maxNum + 1;
                        // 遍历出原来的数组加上一个值
                        let newList = [...this.state.dataList, newMaxNum];
                        // 重新设置值
                        this.setState({
                            dataList: newList,
                            maxNum: newMaxNum
                        });
                    }
                }>点击加1
                </button>
            </div>
        );
    }
}

export default List;

Model

在config.js设置开启dva插件

export default {
    plugins: [
        // 引入插件
        ['umi-plugin-react',{
            // 开启dva插件
            dva : true
        }]
    ]
};

model

在src/models下创建js文件，umi插件会自动把这个文件下的所有文件都渲成model

export default {
    // 设置命名空间，用来区分不同的model
    namespace: 'list',
    // 数据都放在state中
    state: {
        dataList: [1, 2, 3],
        maxNum: 3
    },
    // 用来放置函数
    reducers: {
        addNewData(state) { // state是更新之前的数据
            let newMaxNum = state.maxNum + 1;
            let newList = [...state.dataList, newMaxNum];
            // 更新数据
            return {
                dataList: newList,
                maxNum: newMaxNum
            }
        }
    }

使用model

import React from 'react';
// 引入dva插件
import {connect} from 'dva';

// 命名空间
const namespace = 'list';
// 获取参数
const mapStateToProps = (state) => {
    // 从models的ListData中取得数据
    // 使用state[命名空间].名字 取
    const dataList = state[namespace].dataList;
    const maxNum = state[namespace].maxNum;
    // 返回回去
    return {
        dataList,
        maxNum
    };
};
// 获取函数
const mapDispatchToProps = (dispatch) => {
    return {
        addNewData() {
            dispatch({
                // 指定 命名空间/函数名
                type: namespace + "/addNewData"
            });
        }
    }
};

// 使用修饰器，传递两个参数
@connect(mapStateToProps, mapDispatchToProps)
class List extends React.Component {
    render() {
        return (
            <div>
                <ul>
                    {   // 从props中获取数据
                        this.props.dataList.map((value, index) => {
                            return <li key={index}>{value}</li>;
                        })
                    }
                </ul>
                <button onClick={
                    () => {
                        // 从props中调用函数
                        this.props.addNewData();
                    }
                }>
                    点击加1
                </button>
            </div>
        );
    }
}

export default List;

mock数据

umi中支持对请求的模拟，模拟服务端返回的数据

在项目根目录下创建mock目录在里面写js文件

export default {
    'get /ds/list'(req, res) {
        res.json({
            data: [1, 2, 3, 4],
            maxNum: 4
        });
    }
}

Ant Design

使用

// 在config.js中开启
export default {
    plugins: [
        // 引入插件
        ['umi-plugin-react',{
            // 开启dva插件
            dva : true,
            // 开启Ant Design
            antd: true
        }]
    ]
};