Очень медленные элементы ввода в Ant Design Form

Question

Я использую React и Ant Design для 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

Это должно быть antd и rc-form.См .: https://github.com/ant-design/ant-design/issues/14054

Пока что обходной путь - использовать метод debounce для улучшения опыта ввода.Вы можете создать высокоуровневый компонент для переноса компонента ввода.Lib https://www.npmjs.com/package/react-component-debounce может помочь вам сделать это.Аналогичный код выглядит следующим образом:

import reactComponentDebounce from 'react-component-debounce';

const DebounceInput = reactComponentDebounce({
    valuePropName: 'value',
    triggerMs: 250,
  })(Input);

Answer 2

Ant Design GetFieldDecorator выполняет двухстороннюю привязку данных и для этого изменяет состояние и повторно отображает каждый элемент.

Единственное решение - переписать ваш код без GetFieldDecorator.

Подробнее об этом можно прочитать здесь: https://github.com/ant-design/ant-design/issues/13063

Answer 3

Обычно ввод запаздывает, когда вы обновляете состояние при каждом нажатии клавиши при фокусировке поля ввода (обычно событие onChange), и происходит запаздывание, потому что функция рендеринга, принадлежащая контексту измененного состояния, выполняется повторно, таким образом, у каждого компонента отсутствуетshouldComponentUpdate метод перерисовывает себя.

Решение # 1 Вместо onChange данных набора событий в onBlur событие

Решение # 2 Реализуйте shouldComponentUpdate в каждом дочернем компоненте, чтобы предотвратить ненужные перерисовки

Ref: https://reactjs.org/docs/optimizing-performance.html

Answer 4

Скорее всего, это может быть связано с ненужным повторным рендерингом других компонентов каждый раз, когда вы вызываете setState().

Так, чтобы избежать задержки ответа:

• используйте PureComponent (вы также можете использовать shouldComponentUpdate метод жизненного цикла, но он более подвержен ошибкам) ​​вместо простого Component при расширении компонента, основанного на классе

• при использовании функционального компонента, используйте React.memo()

Убедитесь, что вы используете последнюю версию React

Answer 5

Вот способ выиграть ~ 50%.Этого может быть недостаточно, но это хорошее начало.Вы можете использовать babel-plugin-import , чтобы уменьшить пакет

Заменить import { Form, Row, Col, Input } from "antd" на

var Form = require('antd/lib/form');
var Row = require('antd/lib/row');
var Col = require('antd/lib/col');
var Input = require('antd/lib/input');