Освойте дизайн формы муравья за 10 минут

Критикуемая форма
Принцип формы
История развития Vue-версии Form

Эта статья подходит для чтения разработчикам React и Vue, разве 10 минут недостаточно? Затем добавьте еще 10 минут.

Критикуемая форма

Помимо пасхальных яиц, больше всего жалоб на antd должна вызывать форма Form. Если вам нужно использовать функцию проверки коллекции, которая поставляется с формой, вам нужно использоватьForm.create() компоненты-обертки, каждое значение, которое необходимо собрать, также необходимоgetFieldDecorator для регистрации. В официальной документации очень много умопомрачительных API, велика вероятность, что не так много людей прочитали весь документ, а если и читали, то вряд ли вспомнят.

Эта статья написана не для того, чтобы жаловаться на форму Form.Конечно, у меня нет лучшего плана по оптимизации формы Form.Цель этой статьи - надеяться, что каждый сможет понять суть формы Form и лучше использовать форму Form. через эту статью.

Принцип формы

В Интернете есть несколько статей по анализу исходного кода, лично мне кажется, что коэффициент дохода невелик, и очень скучно проходить объяснения в стиле API одно за другим. Абсурдное изложение принципа: Form.create создает «экземпляр» с функциями регистрации, сбора и проверки.

Разделим это предложение на несколько ключевых слов и проанализируем их одно за другим: Form.create создает экземпляр, регистрацию, сбор и проверку.Четыре ключевых слова

Form.create создает «экземпляры»:

пример? Почему не компоненты. Основная возможность Form.create — создать экземпляр this.props.form, а не компонент. Этот экземпляр предоставляет ряд методов, таких как регистрация, сбор, проверка

Так зачем заворачивать компоненты? Цель упаковки компонента — обновить компонент, не более того.

Вы должны знать все компоненты, которые нуждаются в этом экземпляре, чтобы помочь вам собрать и проверить, вы должны пройтиgetFieldDecorator изменен После изменения getFieldDecorator значение компонента будет полностью управляться экземпляром. Обновление компонента требует выполнения рендеринга в том контексте, в котором находится компонент.Мы знаем, что есть два способа обновить компоненты: 1. Обновился родительский компонент 2. Изменилось его собственное состояние

Таким образом, целью упакованного компонента является обновление родительским компонентом упакованного компонента.getFieldDecoratorДекорированный компонент запускает событие onChange, которое запускает обновление (forceUpdate) родительского компонента, тем самым вызывая рендеринг обернутого компонента. Например: Form.create()(A) A — это то, что мы называем упакованным компонентом.

регистр(getFieldDecorator):

Целью getFieldDecorator является регистрация данных, которые должны быть собраны в экземпляре, и синхронизация зарегистрированного значения с компонентом B, оформленным с помощью getFieldDecorator. Поэтому компонент B не может присваивать значения через value, а состоянием компонента B будет управлять getFieldDecorator.

сбор, проверка

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

Отменить Form.create

Если основная возможность Form.create заключается в создании «экземпляров», значит ли это, что компоненты могут быть упакованы без Form.create? Ответ: Да, если решена вторичная способность компонента обновления. Это именно то, что делает Ant Design Vue.

История развития Vue-версии Form

Сначала мы использовали тот же метод написания, что и в версии React, и нам приходилось использовать Form.create для упаковки компонентов, но синтаксис шаблона, которым восхищался vue, было сложно использовать снова. подвергся критике со стороны пользователей. Затем мы сделали ревизию, поместили Form.create в форму для выполнения и передали пример, созданный Form.create, обратно с помощью обратного вызова:

<a-form :autoFormCreate="form => this.form = form">...</a-form>

Регистрация добавляет соответствующие атрибуты к элементу формы, чтобы захватить дочерние элементы для регистрации.

<a-form-item
  fieldDecoratorId="name"
  :fieldDecoratorOptions="{
    rules: [{ required: true, message: 'xxxx !' }]
  }"
>
  <a-input/>
</a-form-item>

У него большая проблема с такой конструкцией:

Форма не может быть получена вовремя, мы должны получить экземпляр формы до рендеринга компонента
Перехват дочерних элементов через a-form-item имеет большие ограничения.Под каждым a-form-item можно зарегистрировать только один элемент.Конечно, это не большая проблема.Мы можем предоставить a-form-control специально для регистрации компонентов.O__O "... так глубоко вложено.

Окончательное предложение:

Пример:

Поскольку основная способность Form.create заключается в создании «экземпляров», мы можем временно отложить компоненты и сначала решить проблему создания экземпляров.

createForm(options = {}) {
  return new Vue(Form.create(options));
}

Мы предоставляем статический метод для компонентаcreateFormЧтобы создать этот пример, затем с помощью этого метода, который не имеет ничего общего с компонентами, вы можете создавать «экземпляры» в любое время, и вы можете иметь несколько «экземпляров» в одном компоненте одновременно. Основная способность есть, но она невозможна без вспомогательной способности, точно так же, как мозг без конечностей, сердце бессильно. Я сказал раньше,Обновление компонента требует выполнения рендера в том контексте, где находится компонент, тогда проблема проста, нам нужно только передать контекст текущего компонента в этот «экземпляр», и когда компонент зарегистрируется в инстансе необходимо обновить, вызовите его напрямуюcontext.$forceUpdate()Вот и все. код показывает, как показано ниже:

createForm(context, options = {}) {
  return new Vue(Form.create({ ...options, templateContext: context })());
}

регистр:

Это хороший выбор, чтобы напрямую добавить компонент a-form-control, чтобы захватить компонент и зарегистрировать его, но я не хочу, чтобы компонент был слишком глубоко вложен, поэтому мы все еще используем элемент формы для захвата компонента. , чтобы различать потребности, какие компоненты угнали, мы используем директивы для маркировки и передачи значений, Причина использования директив заключается в том, что мы не должны передавать нерелевантный атрибут для компонента, который необходимо зарегистрировать.Если вы передаете необъявленный атрибут, атрибут будет смонтирован на dom.Если вы хотите объявить атрибут, вы должны указать Custom элементы управления формы добавляют дополнительные ограничения. Использование директив для тегирования и передачи по значению не имеет таких проблем.

<a-input
    v-decorator="[
      'note',
      {rules: [{ required: true, message: 'Please input your note!' }]}
    ]"
/>

Нет никакой разницы между проверочной коллекцией и версией React, обе являются просто методами «экземпляра».

Почему двусторонняя привязка не поддерживается?

Строго говоря, он не совсем не поддерживается.Если вам не нужны функции автоматического сбора и проверки Form, вы можете использовать двухстороннюю привязку. Двусторонняя привязка действительно может сэкономить много кода в некоторых бизнес-сценариях, но в некоторых случаях она приносит нам ненужные проблемы. Возьмите очень простой и распространенный каштан: Обычно одни и те же данные используются несколькими компонентами (включая редактируемые формы) в системе.Мы меняем эти данные в форме, и в то же время изменения данных синхронизируются с каждым связанным компонентом, что очень просто выполнить требования. . Но во многих случаях мы надеемся, что данные формы не нужно синхронизировать с другими компонентами во времени после изменения, но когда пользователь нажимает кнопку «ОК» для синхронизации данных, нам приходится копировать или даже глубоко копировать данные в удовлетворить потребности. , очень болезненно.

И если вы используете метод потока данных с одним элементом ant-design-vue, поток между данными становится очень четким, форма похожа на независимую песочницу, независимо от того, как изменяются данные в песочнице, это не повлияет на внешний вид песочницы. , а песочница взаимодействует с внешним через соответствующие методы API.

Наконец, 10 минут штрафа (wo) через (shi) not (biao) in (ti) in (dang), но я надеюсь, что вы сможете лучше понять форму antd благодаря этой статье. Форма по-прежнему имеет много функций, которые вам нужно исследуйте сами, и я не буду раскрывать их здесь по одному, и я не думаю, что в этом есть необходимость. Если у вас есть лучшее решение, вы также можете отправить вопрос и предложение для совместного обсуждения, и мыant-design-vueСделайте ее второй лучшей библиотекой компонентов пользовательского интерфейса Vue в мире. Кто первым воспользуется? ты спрашиваешь меня? Конечно, это являетсяant-design-vue, и не приемлю никаких возражений, раз так уверенно, так бессовестно.

Наконец, разместите рекламу в общедоступной учетной записи WeChat команды, WeChat search "Небольшая техническая команда по работе с большими данными«Подпишитесь на официальный аккаунт, вы правильно прочитали, большие данные. Если вам интересны большие данные, вы можете подписаться на официальный аккаунт. Каждый месяц мы будем выбирать около двух качественных оригинальных статей от команды.