Ant设计表单中的输入元素非常慢

Question

我正在使用React和Ant Design for React，并且正在尝试构建一个包含10到15个输入元素的表单。输入非常慢。我在文档中使用它们的示例作为参考，并且没有做任何不同的事情。是什么导致我的问题？这是参考代码：

const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

<Form inline="true" onSubmit={this.handleSubmit}>
          <Row gutter={8}>
            <Col span={15}>
              <FormItem {...formItemLayout} label="Name">
                {getFieldDecorator(
                  `category[categories_langs][na5me]`)(
                    <Input/>
                )}
              </FormItem>
            </Col>
          </Row>
          
          // The above Row repeated ten-fifteen times

</Form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

通常，当您在关注输入字段（通常是 onChange 事件）时每次击键更新状态时，输入会出现滞后，并且出现滞后是因为属于更改状态上下文的渲染函数被重新执行，因此每个缺少方法的组件都会重绘shouldComponentUpdate自身。

解决方案#1 而不是事件onChange中的事件集数据onBlur

解决方案#2 在每个子组件中实现shouldComponentUpdate，以防止不必要的重绘

参考： https: //reactjs.org/docs/optimizing-performance.html