分类 首页 下的文章 - 吴渭明的博客

【Redux】实例-1

Redux介绍

官方理解:Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
我的理解:利用React、Vue等框架后,实现了系统的组件化开发,这些组件的状态管理由各自进行管理的话,维护起来将非常的复杂,如何由一个统一的状态管理容器来进行管理?这就是Redux存在的意义。

Redux例子

安装Redux

cnpm install redux --save

- 阅读剩余部分 -

【Ant Design Mobile】引入&测试

安装

进入项目根目录,执行

cnpm install antd-mobile@next --save

测试使用

引入

import {Button} from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'

使用

  add(){
    console.log('test')
  }
render() {
    return (
      <div>
        <Button type="primary" onClick={()=>this.add()}>click</Button>
      </div>
    )
  }

- 阅读剩余部分 -

【Ant Design pro-1】新建菜单

Ant Design pro 介绍

Ant Design Pro 是一个企业级中后台前端/设计解决方案。

目标

在Ant Design pro中新建一个菜单。

在common/router.js中新建菜单

如图所示:
Snipaste_2018-01-22_15-50-48.png

##构建页面
在上图路径下新建Test.js文件

import React from 'react';
import moment from 'moment';
import { connect } from 'dva';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';

export default ()=> (<PageHeaderLayout>
       <div>hello world</div>
      </PageHeaderLayout>
    );

效果

Snipaste_2018-01-22_15-52-58.png

【ES6】更好的传参

传统的传参方式

function test(a,b){
    console.log('a:',a);
    console.log('b:',b);
}

test(1,2);

这样有两个缺点:
1.参数的数量需要是确定的;
2.参数的默认值需要重新写代码;例如:

a=a||110;

ES6的方式

let obj={
    a:1,
    b:2
}

function test({a,b}){
    console.log('a:',a);
    console.log('b:',b);
}

test(obj);

ES6可以使用对象传递参数,另外设置默认值的话,可以使用:

function test({a=110,b}){
    console.log('a:',a);
    console.log('b:',b);
}