antd

图标的改进

图标实现了按需加载，体积减少了

import { SmileOutline } from '@ant-design/icons';
const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Form组件

Form 将默认聚合表单数据域，你不再需要通过 Form.create() 创建上下文。 Fom.Item 将默认聚合表单字段，你不需要通过 getFieldDecorator 绑定 Field。 Form.Item 的值将总会保留，但是其验证功能只有表单项可见时才会生效。

import React, { PureComponent } from 'react';
import { Form, Input,Button } from 'antd';
import { UserOutlined,LockOutlined } from '@ant-design/icons';
import style from './index.less';

class Login extends PureComponent {

  onFinish = values => {
    console.log(values)
  }

  render() {
    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
    };
    return (<div>
      <Form {...formItemLayout} onFinish={this.onFinish} className={style.login}>
        <Form.Item  name="username"  rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]} >
          <Input prefix={<UserOutlined/>  }  />
        </Form.Item>
        <Form.Item name="password" rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]} >
          <Input.Password prefix={<LockOutlined/>} />
        </Form.Item>
        <Form.Item>
        <Button type="primary" size="large"  htmlType="submit" block>
           登录
          </Button>
        </Form.Item>
      </Form>
      </div>);
  }
}

export default Login;

以后用到了更多功能，持续更新…..