Со времен React, Vue и других data-driven фреймов родилось много родственных библиотек компонентов, но эти библиотеки компонентов в принципе разные, хоть и постоянно итерации в эти годы, но помимо функционала, это красивее. серьезное изменение. В условиях монополии на материалы, ANTD, очень немногие люди или компании могут выбрать для создания библиотеки компонентов, и библиотека компонентов постепенно отказалась от всех основных форумов конференций. Но с запуском React Hooks, Vue Composition API, я думаю, возможно, у библиотеки компонентов появилась новая точка прорыва.
В некотором смысле компоненты можно разделить на компоненты с состоянием и компоненты без состояния (функциональные компоненты).В идеале мы ожидаем, что все компоненты будут компонентами без состояния, но на самом деле 90% компонентов, предоставляемых библиотекой компонентов. , потому что компонентам приходится поддерживать набор очень сложных логических состояний, что не только снижает удобочитаемость и ремонтопригодность кода, но и усложняет настройку компонентов. Чтобы позволить пользователям настраивать свои собственные компоненты, antd предоставляет ряд более атомарных компонентов rc-xxx на нижнем уровне, но он по-прежнему ограничен структурой html, что приводит к некоторым сценариям, которые не могут быть удовлетворены.
Если можно сказать, что мы можем полностью разделить «состояние» и UI (идеальное состояние), компоненты — это компоненты без состояния, которые только получают атрибуты и отвечают за отображение, а вся логика состояния передана в независимый пакет (здесь мы будем называть его использовать- крючки) управлять, что будет?
- Мне не нравится дизайн муравьиного дизайна, вы можете просто использовать хуки использования и написать свою собственную библиотеку компонентов без сохранения состояния.
- Я боюсь рождественских яиц, вы можете просто использовать библиотеку компонентов без сохранения состояния и написать свой собственный набор юз-хуков.
- Объединение версий react и vue в одном пакете больше не мечта
- ant design будет не только языком дизайна, но и инфраструктурой библиотеки компонентов
Конечно, вышеперечисленное может быть идеальным, но мы упорно работаем в этом направлении. И есть определенные результаты, далее идет дальнейший опыт на примере Vue.
Самой большой особенностью Vue 3 является составной API, который дает нам возможность многократного использования логики в большей степени, а также позволяет нам сделать логику более ясной при разработке крупномасштабных проектов. обнаружил, что в дополнение к повторному использованию логики API композиции также может помочь нам разделить компоненты.
Когда мы разрабатываем компоненты, мы делаем все возможное для достижения «высокой сплоченности и низкой связанности», но некоторые компоненты не были полностью разделены, особенно компоненты формы формы, да, плавные компоненты, железные формы:
Больше никаких упоминаний об истории, посмотрите прямо на статус-кво:
Я проверил почти все существующие основные библиотеки компонентов, основанные на Vue, включая vuetify, element, vant и т. д. Их компоненты формы в основном представляют собой рутину, включая ant-design-vue, все из которых используют предоставление в форме Предоставление контекста формы , используйте inject для внедрения контекста формы в элемент формы, а такие компоненты, как ввод/выбор, генерируют «связь» с формой и элементом формы посредством определенного соглашения (или публикация и подписка, или внедрение зависимостей, или пассивный захват) . Эти компоненты генерируют различные привязки на уровне исходного кода, и уровень использования не является исключением.Каждый компонент должен передавать параметры, проверять логику и отображать сильные привязки в соответствии со «строгой» спецификацией API.
Или, чтобы сделать 🌰 более интуитивно понятным, продукт и дизайн должны реализовать форму, как показано ниже, и все сообщения об ошибках будут отображаться в одном месте:Нима, библиотека компонентов его не поддерживает, его нужно разрабатывать самому, стоимость внедрения высока, его нужно откладывать, он не соответствует историческим спецификациям дизайна, и дизайн изменен.. Короче, разные отговорки. и причины начали разделяться.
Чтобы решить эту проблему, конечно, это не проблема разрыва, а проблема компонентной логики и связи отображения.Мы предлагаем централизованную схему обработки проверки формы - useForm, статус проверки формы полностью обрабатывается в useForm. Для a-form и a-form-item они используются только для макета и стиля формы, без логики проверки, и им не нужно взаимодействовать друг с другом с помощью различных методов. Вам даже не нужна форма, вместо нее можно использовать любой html-тег, конечно, нет ничего плохого в том, чтобы написать еще несколько строк для семантики. Над кодом:
Определите реактивное правило поля данных и формы:
// 数据
const modelRef = reactive({
name: '',
region: undefined,
type: [],
});
// 表单域规则
const rulesRef = reactive({
name: [
{
required: true,
message: 'Please input name',
},
],
region: [
{
required: true,
message: 'Please select region',
},
],
type: [
{
required: true,
message: 'Please select type',
type: 'array',
},
],
});
В качестве первого и второго параметров useForm соответственно возвращаемое значение будет содержать информацию о результатах проверки отклика и другие вспомогательные методы:
const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef);
Вы можете проверить результаты для любого связанного с элементом формы, например:
<a-form-item v-bind="validateInfos.name"></a-form-item>
Вам не нужно заботиться о том, какие значения находятся в validateInfos.name, конечно, если вы хотите сделать более кастомизированный UI, например, хотите отображать информацию об ошибке в виде всплывающего окна:
if(validateInfos.name.validateStatus === 'error') {
alert(validateInfos.name.message);
}
А mergeValidateInfo — это всего лишь вспомогательный метод, который мы предоставляем для слияния проверочной информации в соответствии с распространенными бизнес-сценариями.Так же, как и информация об ошибке слияния, показанная на скриншоте выше, она отображается единообразно в нижней части формы.Код выглядит следующим образом:
const errorInfos = computed(() => {
return mergeValidateInfo(...toArray(validateInfos));
});
<a-form-item class="error-infos" v-bind="errorInfos">
<a-button type="primary" @click="onSubmit">
Create
</a-button>
</a-form-item>
Полный код доступен черезмуравей дизайн vue официальный сайтПроверять. API useForm может быть громоздким, но я хочу поделиться идеей, а API useForm все еще находится в стадии обсуждения.Если у вас есть хорошие предложения, вы можете передать issueВзаимодействуйте с нами.
Помимо useForm, многие useXxxx обсуждают развитие, если вам интересно, вы можете отправить свое резюме наantdv@foxmail.com, конечно же, присоединяйтесь к нам в создании библиотеки компонентов нового поколения. При этом в команде проекта есть и «массовые» стажерские места.
Примечание. Компания по доставке по умолчанию — это компания, стратегически инвестируемая Ant Financial ——Школьные сокровища онлайн, если хотите доставить в технический отдел Ant Financial Experience, укажите это в письме.
Наконец, useXxxx - это новый склад, нажмите звездочку и перейдитеGitHub.com/v Композиторский тендер…