Реагировать на оптимизацию производительности Antdesign

Question

Похоже, что изменение в одном компоненте antd вызовет повторное рендеринг для всех других компонентов на странице. React.PureComponent не работает, когда вы помещаете компоненты antdesign внутрь - он не позволяет вводить текст, потому что состояние и реквизиты не изменились.

Единственный обходной путь, который я вижу, - это поместить дополнительную логику внутрь shouldComponentUpdate или поддерживать локальное состояние с помощью метода onChange для каждого отдельного поля.

Поддержание состояния для всех полей - это головная боль для меня. Кто-нибудь запускает большое приложение со множеством элементов дизайна, чтобы я мог хотя бы понять, когда подходящее время для оптимизации?

В настоящее время у меня есть формы с около 60 компонентами antdesign, и при наборе он некоторое время зависает.

Answer 1

Поскольку никто не ответил, я опубликую ответ, который придумал, пока экспериментировал. Кажется, что использование shouldComponentUpdate в сочетании с локальным состоянием и родительским состоянием, если необходимо, - это путь.

К каждому полю прикреплено событие onChange для изменения локального состояния компонента. Затем внутри shouldComponentUpdate проверьте, соответствует ли nextState текущему состоянию.

Если вам также нужно что-то проверить на соответствие родительскому состоянию, пропустите это через реквизит.

Лично мне не нравится этот подход, но я не могу придумать ничего лучше. Если вы чувствуете, что есть лучший способ, я буду рад услышать другое мнение.