ant design 表单例子，120个field放在一个Form里面的时候会卡顿

antd_one_form.jsx

const { Form, Card, Input, Row, Col } = antd

class MyForm extends React.Component {
  render() {
    const names = ['A', 'B', 'C', 'D', 'E', 'F']
    const inputCount = 20
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    }
    const subForms = names.map(name => {
      const fields = Array.from(Array(inputCount).keys()).map(key => {
        const {getFieldDecorator} = this.props.form
        return (
          <Row key={key}>
            <Form.Item label={`${name}-${key}`} {...formItemLayout}>
              {getFieldDecorator(`${name}-${key}`)(<Input/>)}
            </Form.Item>
          </Row>
        )
      })
      return (
        <Col span={4} key={name}>
          <Card title={`Form${name}`}>
            {fields}
          </Card>
        </Col>
      )
    })
    return (
      <Form>
        <Row gutter={8}>
          {subForms}
        </Row>
      </Form>
    )
  }
}

const WrappedMyForm = Form.create()(MyForm)
ReactDOM.render(<WrappedMyForm />, document.getElementById('container'))