Ant-design: 💥 Ant Design 4.0 находится в разработке!

Созданный на 31 мая 2019  ·  182Комментарии  ·  Источник: ant-design/ant-design

Предварительный просмотр сайта

next.ant.design


Резюме

Прошло 16 месяцев с декабря 2017 года, когда был выпущен Ant Design 3.0. Мы исправили множество ошибок и добавили множество новых функций (список изменений ) в 4289 коммитов, 138 выпусков, 7675 проблем и PR, что принесло нам 25375 звезд на GitHub. Мы также выпустили Ant Design Pro 4.0 . Поддержка TypeScript, блоков и абстракции макетов. Мы хотим поблагодарить всех участников, и ваш вклад делает Ant Design лучше и лучше.

В то же время мы выпустили Ant Design Pro 4.0. Поддержка TypeScript, блока и компонента макета.

В этот момент мы думаем: хорошо, а что дальше? Что мы можем сделать, чтобы Ant Design пошел дальше? Пришло время планировать Ant Design 4.0! 🍻

Ниже приводится подробный план по 4.0. Мы можем скорректировать некоторые из них, так как это все еще находится в разработке.

🌓 О совместимости

Мы удалим устаревшие реквизиты в 4.0, что означает, что устаревшие реквизиты больше не поддерживаются. Если вы не получаете никаких предупреждений от последней версии 3.x, обновление будет без проблем. В противном случае после выпуска версии 4.0 будет проводиться полугодовая техническая поддержка версии 3.0.

Мы знаем, что делать обновления проблематично. Мы планируем предоставить совместимый пакет для решения этой проблемы:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

Этот пакет будет доступен до конца этапа обслуживания 3.x.

Используйте последнюю версию React API

Мы давно обеспечиваем поддержку React 15. Но, судя по отзывам, в этом нет необходимости (с React 15 возникает около 0% проблем), поскольку React обладает хорошей совместимостью. Для поддержки React 15 мы очень осторожно используем новый API. После 4.0 это больше не будет проблемой:

  • Предоставляет API хуков для связанного компонента
  • Поддержка параллельного режима (все еще готовится, продолжу настройку в 4.0)
  • Объятия React 17 (вау! ~)

Прекратить поддержку IE9 / 10

Ant Design 3.0 прилагает много усилий для поддержки старого IE . Но согласно отраслевой статистике, использование IE9 / 10 становится все меньше и меньше с обновлением Windows. Мы прекратим поддержку IE 9/10 в 4.0 (но по-прежнему будем поддерживать IE 11), что означает, что будет возможна поддержка новых функций браузера.

Другое совместимое обновление

  • Менее 2.x обновление до Less 3.x
  • Настройка значка
  • Упоминание устарело

📦 Уменьшить размер

Оптимизировать размер значка

Мы используем значок svg ( почему svg? ) После [email protected] . Мы используем строковое имя для отображения значка, который не может загружаться по запросу. Мы импортируем весь файл значков в antd, что увеличивает размер пакета . Мы справимся с этим в 4.0.

Способ использования старого значка будет * устаревшим *:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Вместо этого в 4.0 будет использоваться импортный одиночный значок:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Вы все еще можете использовать совместимый способ по-старому.

Удалить Draft.js

Мы используем Draft.js в компоненте Mention для подтверждения местоположения всплывающего окна, но используется лишь небольшая его часть. Кажется, это слишком дорого. Мы планируем удалить Draft.js в 4.0 и использовать другое легкое решение. В то же время, чтобы отличить от исходного компонента Mention в 3.0, будет введен новый компонент Mentions, чтобы избежать конфликта API. Также он поддерживает совместимый способ :

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Оптимизация производительности

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

Виртуальная прокрутка

Виртуальная прокрутка - распространенный способ оптимизации производительности. Мы планируем поддерживать это изначально в компонентах. Это может не закончиться сразу в версии 4.0. Интегрирую пошагово.

Рефакторинг анимации

Раньше мы кое-что делали с анимацией. В большинстве случаев это работает хорошо. Мы планируем использовать более чистый способ React вместо взлома. Это обновление будет в тишине, на вас ничего не повлияет.

🧩 Оптимизация компонентов

Мы добавили много компонентов в 3.0 и продолжим в 4.0. Эти компоненты будут взяты из бизнес-сценария, Ant Design Pro и социальных требований. Процесс создания новых компонентов будет таким же, как и в Ant Design 3.0, мы поместим соответствующий файл дизайна в PR и соберем его на официальном сайте. Выпуск в каждой минорной версии.

Кроме того, мы планируем провести рефакторинг некоторых ключевых компонентов, чтобы упростить использование. Включает, но не только:

Форма

Форма - один из наиболее часто используемых компонентов. Мы замечаем, что в соцсетях много комментариев по поводу дизайна API.
Мы хотим упростить API в 4.0:

  • Форма будет включать хранилище данных. Больше не нужно использовать Form.create() .
  • Fom.Item будет включать привязку поля. Больше не нужно использовать getFieldDecorator .
  • Form.Item сохранит значение, но валидатор будет отключен при удалении поля.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

В реальном мире мы часто встречаем взаимодействие между формами (обычно в деталях конфигурации). Мы хотим упростить:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Если вы хотите следить за прогрессом формы, вы можете увидеть здесь .

Стол

В прошлом мы получали много отзывов от Table . Мы знаем, что свойства раскрытия и прокрутки несовместимы. На этот раз мы сосредоточимся на том, чтобы это исправить. Кроме того, мы многое сделаем по оптимизации таблицы. И простой способ сделать верстку :

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

Мы также планируем добавить итоговый нижний колонтитул для поддержки итоговой строки.

Новый DatePicker

Текущий DatePicker удовлетворяет большинству требований. Но из обсуждения сообщества мы можем докопаться до большего. Обеспечим сборщика на год отдыха и сборщика рейнджеров ( обсудить ). А также мы обновим стиль дизайна DatePicker, чтобы улучшить взаимодействие с пользователем.

🚀 Продолжить обновление

Помимо приведенного выше содержания, мы также планируем продолжить некоторые обновления. Они будут продолжать обновляться в 4.0 для улучшения разработки и взаимодействия с пользователем.

🧶 Улучшить доступность

Ant Design 3.0 имеет ограниченную поддержку специальных возможностей, мы планируем скорректировать структуру dom и добавить больше меток арии, чтобы улучшить возможности чтения с экрана. Кроме того, мы также готовимся оптимизировать взаимодействие с руководством.

🎯 Стандарт API разработчика

Мы обнаружили, что некоторые стили именования API немного отличаются от других. Для разработчика Typescript это не проблема, но иначе сложно вспомнить.
Таким образом, мы создадим стандартный документ именования, который будет включать текущие API и соответствующие правила именования. В новой функции будет следовать правилу именования, чтобы избежать конфликта именования API. Также мы приветствуем мнения сообщества по этому поводу в PR.

💼 Режим React Strict

Если вы попытались обернуть компонент antd с помощью <React.StrictMode> , вы получите предупреждение. Мы уже заменили некоторые компоненты на новый метод жизненного цикла. Эта работа будет продолжена в 4.0.

💡 Улучшение опыта разработчиков

В прошлом мы обнаружили, что некоторые проблемы возникают неоднократно. Эти проблемы так или иначе связаны с вопросом использования. Мы думаем, что можем что-то с этим сделать (на самом деле это уже начало в версии 3.0). В среде разработки мы будем предупреждать о неожиданном статусе (например, аннулировать объект Moment, корректировка префикса / аффикса вызывает изменение структуры dom и т. Д.). Мы считаем, что консоль - это первое место, на котором нужно сосредоточиться при возникновении проблемы. Предоставленные правильные советы могут помочь найти проблему. В то же время, мы объединим другие вопросы в FAQ каждого документа компонента. Со стороны обслуживания мы не можем помочь по каждому вопросу использования, но они существуют, особенно с новыми разработчиками. Часто задаваемые вопросы могут помочь сэкономить много времени на поиск. Если вам это интересно, добро пожаловать, чтобы помочь нам улучшить опыт разработчиков.

🐱 Дизайн ресурсов

Ant Design - это не только библиотека компонентов. Дизайн - это сила поддержки. Мы будем синхронизировать обновления ресурсов дизайна (пакет компонентов Sketch, кухонные инструменты, токен дизайна и т. Д.). Мы также скорректируем текущий стиль компонентов, чтобы улучшить взаимодействие с пользователем.

Вехи

Вот наш план основных этапов. Мы создадим соответствующий выпуск на Github. А также приветствуем участников соцсетей:

2 квартал

  • Отметьте связанный API как устаревший и удалите из документа.
  • Обновление предупреждения компонента низкого уровня.

3 квартал

  • Создайте ветку antd 4.0 и обновите документ.
  • Разработка компонентов.

4 квартал

  • Выпуск Ant Design 4.0.

Добро пожаловать на борт

Мы будем держать вас в курсе во время процесса разработки. Приведенный выше контент может не быть окончательным. Мы будем приветствовать мысли и советы сообщества! Давайте сделаем Ant Design 4.0 лучше!


введение

Прошло 16 месяцев с тех пор, как Ant Design выпустил 3.0 в декабре 2017 года. За этот период мы исправили большое количество ошибок и добавили большое количество новых функций ( журнал обновлений ). Выполнено 4289 коммитов, выпущено 138 версий, закрыто 7675 проблем и PR и добавлено 25375 звезд. Мы также выпустили Ant Design Pro 4.0 . Поддерживает TypeScript, блоки и абстрагирует макет. Мы хотели бы поблагодарить всех волонтеров сообщества за ваше стремление сделать Ant Design более удобным.

В то же время мы также думаем о том, каков следующий шаг и как продвинуть Ant Design дальше. Мы ожидаем выпустить версию Ant Design 4.0 в четвертом квартале этого года . 🍻

Ниже приводится подробный план для 4.0, конечно, это все еще планируется. Когда он будет официально выпущен, могут быть внесены изменения.

🌓 Регулировка совместимости

Мы удалим атрибуты, помеченные как устаревшие в 4.0. В то время вы больше не сможете использовать заброшенные методы. Если вы обновляете свой проект до последней версии 3.x и не видите предупреждающее сообщение от antd в консоли, то ваше обновление до 4.0 также будет без проблем. Для версии 3.x мы по-прежнему будем проводить дополнительные шесть месяцев обслуживания после выпуска 4.0.

Мы знаем, что у обновленной версии много энергии для отказа от устаревшего API. Мы планируем предоставить совместимый пакет, чтобы облегчить переход проекта при выпуске 4.0 (соответствующий API все еще находится в стадии разработки и может отличаться, когда он будет официально выпущен):

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

Пакет совместимости также будет обновляться до тех пор, пока не прекратятся работы по обслуживанию версии 3.0.

Используйте последнюю версию React API

Мы поддерживаем версию React 15 в течение долгого времени, но, судя по отзывам сообщества, это на самом деле не важно (количество проблем в React 15 приближается к 0%). Потому что у React очень надежная совместимость. Чтобы поддерживать React 15, мы очень внимательно относимся к использованию новых API в процессе разработки. После версии 4.0 мы будем использовать последнюю версию React в качестве эталона для разработки:

  • Предоставить хуки версии связанных компонентов
  • Поддержка параллельного режима (конечно, есть много вещей, которые нужно подготовить, и они будут корректироваться в версии 4.0.)
  • Примите React 17 (вау! ~)

Прекратить поддержку IE9 / 10

Ant Design 3.0 приложил много усилий для обеспечения совместимости со старой версией IE . Однако, согласно отраслевой статистике, как глобальная, так и внутренняя доля браузера IE9 / 10 сокращается с обновлением системы Windows. В версии 4.0 мы прекратим поддержку IE 9/10 (но по-прежнему будем поддерживать IE 11). Это также означает, что можно поддерживать новые функции браузера.

Другие настройки совместимости

  • Обновление с Less 2.x до Less 3.x
  • Изменение использования значка
  • Упоминание устарело

📦 Уменьшить громкость

Оптимизировать размер значка

В [email protected] мы представили значок svg ( зачем использовать значок svg? ). Используется API для установки значков со строковыми именами. В этом дизайне мы не можем загружать по запросу, поэтому мы ввели все файлы значков svg, что значительно увеличивает размер упакованного продукта. В 4.0 мы изменим это, чтобы оптимизировать громкость.

Старая версия использования Icon будет устаревшей :

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

В 4.0 будет принят метод внедрения по требованию:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Вы по-прежнему сможете продолжать использовать указанный выше совместимый метод.

Удалить Draft.js

Мы представили Draft.js в компоненте Mention для реализации функции позиционирования выпадающих подсказок, но мы использовали только небольшую часть его функции. Учитывая стоимость, это кажется немного расточительным. Мы планируем убрать зависимость от него в 4.0 и вместо этого использовать более легкое решение. В то же время, чтобы различать компоненты Mention в версии 3.0, мы предоставим новый компонент Mentions для предотвращения конфликтов API. Точно так же он также поддерживает дальнейшее использование вышеуказанных совместимых методов:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Оптимизация производительности

В процессе обслуживания мы получили много споров о производительности больших данных. С этой целью мы также планируем оптимизировать производительность.

Виртуальная прокрутка

Виртуальная прокрутка - распространенный метод оптимизации, но из-за эффектов анимации в Ant Design настроить виртуальную прокрутку не так просто. Теперь мы планируем изначально поддерживать виртуальную прокрутку в компонентах с прокруткой. Конечно, мы не гарантируем, что все компоненты были обновлены после выпуска 4.0, и мы будем продолжать обновляться.

Улучшения анимации

Раньше мы использовали несколько приемов для обработки анимации. В большинстве сценариев это работает достаточно хорошо. В 4.0 мы планируем скорректировать это и отказаться от хакерского подхода к более React-пути. Настройка будет обновлена ​​без уведомления, и вам не нужно вносить в нее какие-либо изменения.

🧩 О компонентах

В версии 3.0 мы продолжили добавлять множество компонентов. В 4.0 продолжим. Эти компоненты будут уточняться с учетом наших бизнес-сценариев, Ant Design Pro и потребностей сообщества. Это постоянный процесс. Процесс добавления новых компонентов такой же, как и в Ant Design 3.0. Мы ускорим разработку проектов связанных компонентов, отобразим их в PR и обновим их на официальном веб-сайте. После завершения разработки они будут выпущены в ежемесячной минорной версии.

Кроме того, мы также готовимся к рефакторингу некоторых ключевых компонентов, чтобы упростить разработку и взаимодействие. Он включает, но не ограничивается:

Компонент формы

Аудитория компонентов формы очень велика, и мы также заметили жалобы сообщества на громоздкость API форм. В 4.0 мы надеемся изучить более совершенные формы API, чтобы упростить затраты на разработку:

  • Форма по умолчанию объединяет поля данных формы, и вам больше не нужно создавать контекст через Form.create() .
  • Fom.Item будет агрегировать поля формы по умолчанию, вам не нужно связывать поле через getFieldDecorator .
  • Значение Form.Item всегда будет сохраняться, но его функция проверки будет действовать только тогда, когда элемент формы виден.
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

В реальной сцене мы столкнулись со сценой соединения нескольких форм (обычное дело в детальной конфигурации). Мы знаем, что это неудобно использовать, поэтому мы также предоставим функцию связи между формами:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Если вы хотите следить за прогрессом формы, добро пожаловать, чтобы проверить прогресс .

Компонент таблицы

В прошлой версии мы получили много отзывов о компоненте Table . Мы знаем, что свойства раскрытия и прокрутки таблицы в прошлом не работали должным образом. На этот раз мы сосредоточимся на разрешении конфликтов в этой сфере. Кроме того, мы дополнительно оптимизируем производительность компонента Table. И изучите несколько более простых методов компоновки таблиц:

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

Кроме того, мы также планируем добавить сводный нижний колонтитул для поддержки сводных требований.

DatePicker переделан

Существующий DatePicker удовлетворил большинство потребностей, но по результатам обсуждения в обсуждение ). Кроме того, мы скорректируем стиль связанных селекторов даты и времени, чтобы еще больше снизить когнитивные затраты пользователей.

🚀 Постоянно обновлять

В дополнение к вышеупомянутому контенту мы также планируем продолжить обновление некоторого контента. Это будет продолжено в 4.0, чтобы улучшить разработку и взаимодействие с пользователем.

🧶 Повышение доступности

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

🎯 Спецификация API разработчика

В ходе эволюции мы обнаружили, что некоторые стили API кажутся несовместимыми с другими компонентами. Для пользователей TypeScript это не проблема, но для других пользователей это может вызвать проблемы с памятью.

Итак, мы составим стандартный документ по именованию. Документ будет содержать список существующих API и соответствующие соглашения об именах. При добавлении новых функций они также будут называться в соответствии с этой спецификацией. Чтобы избежать расхождений API, которые могут возникнуть в будущем. Конечно, мы также приветствуем студентов сообщества, которые высказывают свои мнения по PR.

💼 Реагировать в строгом режиме

Если вы попытаетесь обернуть <React.StrictMode> вне компонента antd, вы получите много предупреждений от компонента antd. Мы обновили методы жизненного цикла некоторых компонентов в версии 3.0. В 4.0 продолжим.

💡 Улучшение опыта разработчиков

В ходе прошлого процесса обслуживания мы обнаружили, что определенные проблемы могут возникать постоянно. Эти проблемы часто встречаются в некоторых спецификациях использования или сценариях приложений. С этой целью мы решили внести здесь улучшения (фактически, начиная с 3.0, мы улучшали). В среде разработки мы будем запрашивать в консоли некоторые непредвиденные ситуации (например, недопустимые объекты Moment, изменения структуры Dom, вызванные динамической настройкой префикса / аффикса Input и т. Д.). Мы убеждены, что консоль - это первое место, на которое разработчики обратят внимание при возникновении проблемы, и соответствующие подсказки здесь могут помочь быстро найти проблему. В то же время для некоторых особых случаев использования или сценариев. Мы предоставим ответы на часто задаваемые вопросы в документации соответствующего компонента. С точки зрения сопровождения проекта наша энергия не может дать подробных ответов на вопрос использования. Но эти вопросы реальны, особенно для начинающих разработчиков, часто задаваемые вопросы могут помочь сэкономить много времени на поиск. Если вам интересно, волонтеры сообщества также могут помочь улучшить опыт разработчиков.

🐱 Дизайн управления активами

Ant Design - это не только набор библиотек компонентов, но и стоящая за ним мощная система дизайна. В 4.0 мы обновим последние активы, связанные с дизайном (пакет компонентов Sketch, набор инструментов Kitchen, Design Token и т. Д.), Чтобы облегчить дизайнерам и студентам, которым интересен дизайн в качестве справочного материала. Существующие стили дизайна компонентов также будут доработаны для улучшения визуальных эффектов и удобства работы пользователей.

План времени

Ниже приводится наш график, в котором постоянно обновляются некоторые компоненты. Мы будем создавать связанные вопросы на github и приглашать волонтеров сообщества к участию:

2 квартал

  • Отметьте требуемый устаревший API как устаревший и удалите его в документе.
  • Базовые компоненты предварительно нагреваются.

3 квартал

  • Установите ветку antd 4.0 и обновите документацию.
  • Разработка компонентов низкого уровня.

4 квартал

  • Версия Release 4.0.

Добро пожаловать к участию

В процессе разработки 4.0 вышеуказанное содержимое может быть изменено. Приглашаем студентов сообщества поделиться ценными идеями и предложениями, позвольте нам сделать Ant Design 4.0 более удобным и простым в использовании!

4.x ✨ Announcement 🕙 Plan 🗣 Discussion

Самый полезный комментарий

15311

Заменим ли мы Moment.js в версии 4?

Все 182 Комментарий

15311

Заменим ли мы Moment.js в версии 4?

Отлично, не могу дождаться обновления

Подготовка к альфа-версии V4

В основном цель

  • [x] ветка v4
  • [x] Совместимый пакет
  • [x] Удалить устаревший контент

    • [x] Упоминание компонента

    • [x] Новый компонент упоминаний № 16532

    • [x] Form.create

    • [x] Значок с type # 12011

    • [x] Другое с устаревшими предупреждениями

  • [x] Меньше v3
  • [x] Производительность

    • [x] rc-animate обновление

    • [x] поддержка параллельного режима

    • [x] Поддержка анимации виртуальной прокрутки

    • [x] Виртуальная прокрутка

    • [x] компонент RC

    • [x] Дерево

    • [x] Выбрать

    • [x] TreeSelect

    • [x] Форма: https://github.com/react-component/form/pull/292

    • [x] Предоставляет версию хуков

    • [x] Таблица

    • [] templateAreas

    • [x] Поддержите expand & scroll совместную работу

  • [x] DatePicker с новым дизайном

    • [x] YearPicker

    • [x] RangePicker.YearPicker

    • [x] RangePicker.MonthPicker

    • [x] RangePicker.YearMonthPicker

    • [x] RangePicker.WeekPicker

    • [x] TimePicker.RangePicker

Продолжить цель

  • [] Доступность
  • [x] Стандарт API
  • [] React.StrictMode

Вот несколько предложений по Ant 4

О templateAreas

templateArea анализирует строку во время выполнения, это вызовет необъявленные ошибки синтаксического анализа или случайные ошибки при опечатке строки. Разбор времени выполнения также недружелюбен для TypeScript. Будет ли Ant Team рассматривать предложение ниже:

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

О зависимости

Будет ли Ant Team рассматривать возможность устранения зависимости moment ?

Момент слишком велик для внешнего проекта, есть много альтернатив, но реквизиты TimePicker и DatePicker передаются на Момент. Это приводит к тому, что мы не можем заменить moment на date-fns или другую библиотеку, меньшую, чем Moment.

О Icon

Я думаю, что способ, которым сейчас используются значки Ant, не должен быть устаревшим, новый способ, которым значок импорта может вызвать изменение общего блока пакета, когда я добавляю или удаляю один значок.

Ant Team может предоставить два способа использования значков Ant:

  1. Упакуйте все значки в один js-файл, разработчики могут импортировать весь файл, используя тег <script> , и установить externals в webpack.
  2. Новый способ, представленный выше.

是 我 对 Ant4 的 一些 建议

关于templateAreas

templateAreas在 运行 时 对 字符串 进行 解析 , 当 字符串 出现 拼写 错误 的 时候 , 可能 会 解析 失败 或者 静默 错误。 运行 时 解析 TypeScript 也不 友好 。Ant 团队 是否 考虑 如下 方案 :

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

关于 依赖

是否 考虑 移除 对 Moment 的 依赖?

Момент 对于 前端 项目 来 时 实在 是 太大 了 , 市面上 有 许多 可供 替代 的 库 , 但是TimePickerDatePicker的 参数 依赖 于 Moment 对象 , 这 导致 了 我们 没 办法 使用date-fns或者 一些 比 Момент 更 小 的 库 来 替代 Момент。

关于 图标

我 认为 当前 使用 Ant 图标 的 方式 不 应该 被废弃。 新 的 使用 方式 在 我 新增 一个 图标 引用 的 时候 , 可能 会 导致 chunk 反复 变更。

Муравей 团队 可以 提供 如下 两种 方案 来 使用 Муравей 图标 :

  1. 打包 所有 图标 到 一个 js 文件 中 , 开发 者 通过<script>标签 引用 全部 图标 , 并且 在 Webpack 中 设置 为externals
  2. 4.0 新 介绍 的 图标 使用 方式

Есть ли план поддержки виртуального скроллинга для стола? В некоторых случаях предпочтительнее использовать бесконечную таблицу, чем разбиение на страницы.
И поскольку «Комментарий» включен в 3.11, возможно, ChatBox и ChatMessage?

Есть ли план поддержки виртуального скроллинга для стола? В некоторых случаях предпочтительнее использовать бесконечную таблицу, чем разбиение на страницы.
И поскольку «Комментарий» включен в 3.11, возможно, ChatBox и ChatMessage?

UserInfo возможно приоритеты.

около templateAreas

Я также поддерживаю синтаксис двумерных массивов
Я также поддерживаю синтаксис двумерных массивов.

Что касается templateAreas, вот пример статической проверки
Это пример статической проверки типа с использованием ts для templateAreas.

interface Cell<T extends string = string> {
  key: T;
  title: string;
}

interface Config<K extends string = string> {
  header: {
    templateAreas: ReadonlyArray<ReadonlyArray<K>>;
    cells: ReadonlyArray<Cell<K>>
  };
}


declare function check<T extends string>(config: Config<T>): void;

const config = {
  header: {
    templateAreas: [
      ['name', 'address', 'address'],
      ['name', 'building', 'error'],
    ],
    cells: [
      { key: "name", title: "Name" },
      { key: "address", title: "Address" },
      { key: "building", title: "Building" },
      { key: "no", title: "No" }
    ]
  }
} as const;

check(config);

Игровая площадка

image

здорово

15311

Заменим ли мы Moment.js в версии 4?

Я думаю, что основная проблема для отхода от moment - это нарушение изменений около locale s. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

Надеюсь, поддержка машинописного текста может быть лучше

Отличное видение 4.0 уже в процессе! У меня есть несколько предложений ниже для рассмотрения, я не совсем уверен, вписываются ли они в шаблон проектирования, но, на мой взгляд, с точки зрения настраиваемости они были бы отличными.

  • Возможность управлять цветом фона строки в <Table> . Например, окраска строки в оранжевый цвет, чтобы выделить предупреждение для этой строки.
  • Цвета кнопок, не нашел ранее обсуждений по этому поводу. Но было бы здорово иметь такой же API, как <Tag color="red">RED<Tag /> для кнопок, например <Button color="red">Red Button<Button/> .
  • Поддержка значков Font-Awesome 5.x в различных компонентах или обеспечение их работы с другими текущими значками. Я заметил некоторые проблемы с выравниванием при использовании FA вместо собственного компонента <Icon> .
  • Компонент <Pagination> не поддерживает прямую поставку количества страниц, вариант использования состоит в том, что мне доступно только количество страниц и текущая страница, например, но не количество элементов на каждой странице. Я пока не нашел хорошего способа справиться с этим.

@orecus

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

Я обычно использую rowClassName для присоединения класса к этой строке, а затем заменяю стиль по умолчанию с помощью css.

Вкомпонент не поддерживает прямую поставку количества страниц

Может пройти фальшивый итог. Например, если вам нужно 50 страниц, можно передать total = pageSize * 50 .

Это действительно хорошая новость 🚀 Сосредоточенность на производительности очевидна, и это здорово, потому что некоторые компоненты нельзя использовать с большими объемами данных.

Как вы хотите реализовать виртуальную прокрутку? Используете react-window ?

Есть ли приоритеты для Mainly target features?
Я бы хотел попробовать виртуальный выбор на альфа-стадии, и я думаю, что я не одинок в этом отношении.

Благодарю.

Почему имя строки не может загружаться по запросу? lazy () не решает проблему?

@faradaytrs
Да, но это зависит от характеристик webpack , конкретных операций

Две проблемы более заметны

  • /* webpackChunkName: "icons/icon-" */ записывается webpack Magic Comments
  • Как говорилось в оригинале: «Каждый значок содержит дополнительную информацию о модуле Webpack в дополнение к содержимому значка».

Есть идеи о загрязнении глобального стиля? # 4331 # 9363

Есть идеи о загрязнении глобального стиля? # 4331 # 9363

IMHO было бы здорово для 4.0, чтобы пользователи могли использовать стили antdesign под глобальным именем (см. Мой комментарий https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487)

Приятно слышать о следующей вехе!

Мои 2 Кт. относительно документации и оптимизации:

Часто пропсы передаются в базовые элементы DOM, которые не документированы (IIRC В некоторых случаях проходят все реквизиты, которые не выбраны реализацией компонента). Было бы очень полезно, если бы они были задокументированы и сгруппированы по целевому элементу (их может быть больше одного): «Следующие свойства передаются в контейнер.

"или" Следующие реквизиты передаются через element ... "или" Все остальные реквизиты передаются в ... ". Для этих реквизитов нет необходимости в подробном объяснении, ссылки на MDN могут быть достаточными.

Такое изменение также было бы замечательно для нас, разработчиков TypeScript, в настоящее время требуется много утомительной работы, чтобы поддерживать определение TS в актуальном состоянии в этом отношении.

В «стандарте API разработчика» это должно быть задокументировано, и должно быть решение, какие реквизиты должны всегда передаваться (className, id,?)

Другой вопрос:

Планируете ли вы переключить больше файлов (или даже rc-компонентов) с JavaScript с определениями TypeScript на собственный TypeScript?

Подумайте о замене rc-form на что-то более гибкое, например Formik.

Вопрос к сопровождающим:

Моя команда заинтересована в испытании Ant, но https://github.com/ant-design/ant-design/issues/11097 (Antd Less создает глобальные утечки JavaScript) нас блокирует. В дорожной карте выше говорится, что Ant будет переходить на LESS версию 3, и я читал, что рассматриваемая небезопасная, устаревшая встроенная функция JavaScript отключена по умолчанию. Означает ли это, что в Ant версии 4 больше не будет проблемы LESS?

Не только IE9 / 10, но и прекращение поддержки IE,

О, черт возьми, было бы так полезно не загрязнять глобальные стили ( html , body , *::before , ...)

Карусель на основе response-slick имеет массу проблем при использовании. Рекомендуется заменить новую версию другой библиотекой.
react-pannable довольно хорошо использовать

@cztflove Описание no message and, и внимание сообщества слишком низкое, я не должен это учитывать.

@ yoyo837 В основном этот компонент новый, поэтому внимание относительно невелико, но он поддерживает virtual list и 仿ios边缘弹性 , на основе этого компонента также могут быть реализованы некоторые функции 拖拽 . В будущем есть больше возможностей для расширения

Разве нам не следует перейти на один универсальный язык?

Я полностью согласен и уважаю региональные языки, даже если я не являюсь носителем английского языка. Есть сотни повторяющихся или, лучше сказать, повторяющихся задач с двуязычием, прежде всего, наиболее важным фактором является время, перевод обсуждаемых строк, изучение документации или tuts. демонстрации и т. д.

Я должен признать, что недостатка в участниках из-за языковых конфликтов нет, но сотни из нас боятся вмешиваться. Уже есть много спринтов, текущие проблемы с переводом, но я прошу полностью перейти на один универсальный язык с этим основным выпуском, чтобы сократить разрыв в общении между всеми нами.

Разве нам не следует перейти на один универсальный язык?

Я полностью согласен и уважаю региональные языки, даже если я не являюсь носителем английского языка. Есть сотни повторяющихся или, лучше сказать, повторяющихся задач с двуязычием, прежде всего, наиболее важным фактором является время, перевод обсуждаемых строк, изучение документации или tuts. демонстрации и т. д.

Я должен признать, что недостатка в участниках из-за языковых конфликтов нет, но сотни из нас боятся вмешиваться. Уже есть много спринтов, текущих проблем с переводом, но я прошу полностью перейти на один универсальный язык с этим основным выпуском, чтобы _ уменьшить разрыв связи_ между всеми нами.

说得 对 , 专心 说 中文 吧

Вопрос к сопровождающим: планируется ли использование CSS-переменных для изменения цвета и стилей тем на лету?

На практике я узнал, что изменение стилей компонентов с помощью переменных - очень удобный способ. Я попытался переписать переменные Less с помощью var(--css-vars) , но обнаружил много ошибок при компиляции стилей, потому что многие стили используют функции и операции с переменными, а не только значения. Я полагаю, что это большая задача и таким образом создавать критические изменения, но для критических изменений были созданы основные версии :) А использование CSS-переменных может дать много возможностей для настройки стилей компонентов.

Что ты об этом думаешь? Я все равно планировал разработать тему с использованием CSS-переменных в качестве запроса на вытягивание, потому что эта функция (изменение темы на лету) необходима в моем проекте.

Извините, если это предложение повторяется, но я не нашел ничего об этом в других выпусках и PR.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Это должно остановить всю поддержку IE, прекратить поддержку IE11 слишком радикально, хотя я тоже поддерживаю это.

@ yoyo837 , согласен, это слишком радикальная причина проблем с поддержкой IE. Но также Ant Design имеет официальную поддержку (как сказано в ant.design) Electron (как отдельная платформа, а не сеть). Возможно, для этого случая есть способ создать две темы: одну с меньшими переменными, другую с переменными CSS. Но кажется, что это слишком сложно поддерживать.

Итак, другая возможная стратегия, которую я предполагаю - создать Less vars для всех настраиваемых атрибутов в Less или исключить использование любых функций и операций в Less vars, которые любой разработчик может использовать в качестве записи для своих переменных CSS. Или, если сказать проще - используйте Less vars только как контейнер значений, а не для функций и операций.

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

Не только IE9 / 10, но и прекращение поддержки IE,

@wanliyunyan Слишком ломается. Некоторые разработчики могут придерживаться antd @ 3, и это не очень хорошо для нас.

@ Z3SA Это будет огромная работа.

@dancerphil К счастью, в моем проекте я рассматриваю только последнюю версию Chrome. 😃 Так что я надеюсь, что чем меньше размер, тем лучше.

@ yoyo837 Я знаю это. И я сделаю это сам, если этой идее не будет хватать внимания.

Мы компания, которая хотела бы постепенно перейти на antd, используя отдельные компоненты; Однако использование муравьями глобальных стилей действительно усложняет эту проблему. Пожалуйста, прекратите загрязнять глобальные стили.

Форма - один из наиболее часто используемых компонентов. Мы замечаем, что в соцсетях много комментариев по поводу дизайна API. Мы хотим упростить API в 4.0:

Fom.Item будет включать привязку поля.

Позволят ли эти изменения нам использовать Form.Item в качестве строго презентационного компонента? Мне нравятся компоненты antd, но я предпочитаю реакцию-финальную форму для управления состоянием. Мне нужен стиль Form.Item, а не логика управления состоянием.

ветка 4.0 создана. Когда я могу предварительно просмотреть

новый компонент формы потрясающий!

Пожалуйста, замените momentjs на dayjs, поскольку momentjs огромен, и размер пакета также стал огромным.

Есть ли какие-нибудь подводные камни при выборе редактора форматированного текста?

Какая дата выхода?

@rafaelodassi Подтвержденной даты пока нет, но, вероятно, в 4 квартале.

Обновление до @babel/[email protected] и [email protected] будет нашим приоритетом.

Не v3? Есть какие-нибудь новости по [email protected] ?

Все говорят об отказе от поддержки IE, потому что статистика показывает, что она почти не используется. Как насчет миллионов корпоративных пользователей интрасети, которые вообще не попадают в статистику? Они застряли в IE10 и IE11 из-за корпоративной политики.

Я буду придерживаться antd @ 3, если поддержка IE11 будет прекращена. Отказ от IE10 может быть принят большинством клиентов, поскольку он больше не поддерживается MS, а корпоративные ПК обновляются до IE11.

Я бы предложил ввести API, позволяющий использовать объекты как значения <Select/> .
подробнее см. https://github.com/ant-design/ant-design/issues/13485

cc @zombieJ

Рекомендуется, чтобы у каждого компонента был свой собственный журнал обновлений. Неважно, если вы скрываете его. Личное предложение ~

Когда станет возможным Release или RC?

Рекомендуется, чтобы у каждого компонента был свой собственный журнал обновлений. Неважно, если вы скрываете его. Личное предложение ~

Согласитесь, можно ли добавить документацию по каждому компоненту, по какой версии. В противном случае вы можете просмотреть документацию и посмотреть, можно ли использовать текущую версию и нужно ли обновлять зависимости.

Отправлено с GitHawk

@ fwh1990 @ jas0ncn @redclown
на английском, пожалуйста)

Сохраните его как английский канал, спасибо ~

Опубликована альфа 4.0. Это восхитительно. Давай, брат.

Я проведу рефакторинг своего проекта, как только вы опубликуете бета- версию

Тема по умолчанию antd прекрасна, но она также может быть лучше.
Для удобства чтения рассмотрите возможность повышения контрастности и используйте более крупный текст.

Есть так много статей и инструментов.
https://www.google.com/search?q=web+readability

Лучше предоставить сценарий для миграции antd v3 на v4.

В бизнес-проекте слишком много компонентов формы. Перенос antd v3 в v4 будет стоить слишком много раз.

Команда react-relay сделала нечто подобное.
Если вы хотите перенести react-relay v3 на Realease react-relay v4 , вам нужно изменить много файлов.
Поэтому они используют jscodeshift для написания сценария миграции, чтобы пользователь react-relay мог легко выполнить миграцию react-relay v3 в v4.

Мне кажется, что некоторые стили сложно переписать. Так есть ли план по улучшению этого?

Лично я предпочитаю использовать CSS-in-JS, он очень гибкий и отлично сочетается с React.

При использовании компонента класса в версии 4.0 alpha невозможно получить сущность формы, https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn Пример кода по этой ссылке не может быть реализован, и в formRef нет сущности метод

Решил это в

@ Kwei9 , а можно вопрос открыть и приложить для воспроизведения?Дай взглянуть

@ Kwei9 , а можно вопрос открыть и приложить для воспроизведения?Дай взглянуть

Запись ссылки изменена на это решение

Я думаю, что сейчас самое время заняться проблемой загрязнения глобального стиля! Это заставляет использовать antd вместе с другими приложениями!

Moment слишком велик для внешнего проекта, есть много альтернатив, но реквизиты TimePicker и DatePicker передаются на Moment. Это приводит нас, не может заменить момент ...

@ jas0ncn Привет, пожалуйста, подумайте о замене momentjs на dayjs (альтернатива 2 КБ). Это уже протестированная проблема Замени Moment.js в Ant Design (Antd) на Day.js https://github.com/iamkun/dayjs/issues/529, и она работает очень хорошо.

Как основной разработчик dayjs, мы готовы предложить любую помощь с этой заменой.

Благодарю.

考虑 使用 轻 量 的 Dayjs 来 替换 moment.js , 在 这里 已经 充分 测试 过 替换 的 可行性https://github.com/iamkun/dayjs/issues/529

Способ использования старого значка будет * устаревшим *:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Вместо этого в 4.0 будет использоваться импортный одиночный значок:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

У меня есть представление о новой ссылке на значок. Из-за новой формулировки, приведенной выше, каждый значок эквивалентен отдельному компоненту. Например, введение значка загрузки может выглядеть так:

import Loading from 'antd/icons/Loading';

<Loading />

Но обычно вы можете инкапсулировать реальный компонент загрузки самостоятельно. В прошлом <Icon /> знал, что это значок. Теперь он занимает слишком много имен, и вам нужно найти место импорта, если вы хотите узнать, является ли это значком.
такие как:

<Title />
<Loading />
<Sun />  

На первый взгляд кажется, что следующие два нельзя рассматривать как значки (конечно, это не влияет на выполнение кода ~)
Если вы измените формулировку на следующую:

 import {Icon} from 'antd';
 import {Loading, Sun} from '@antd/icons';  

<Icon spec={Loading}  {...otherProps}/>
<Icon spec={Sun} />

На внешнем уровне стиля он выглядит очень похоже на предыдущий, и его также можно использовать по запросу, это не что иное, как введение компонента Icon.
И если соблюдаются определенные соглашения, пользовательский значок может быть передан через атрибут spec? Это эквивалентно тому, как antd помогает заранее определить множество значков, но пользовательские значки точно такие же ~~~ (просто поговорите ~)

ps: Или дело в том, что о таком письме действительно думали очень давно, или не думали так, потому что у такого типа письма есть некоторые проблемы? . . 😂
Я просто подумал об этом. . .

@ppbl в соответствии с вашей идеей похож на следующее:

import Icon from '@antd/icons'; 
imoort { LoadingOutline } from '@antd/icons-svg';

<Icon component={LoadingOutline}  {...otherProps}/>

Новый значок также создается аналогичным образом, см. Https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx

Можно ли избежать этой ситуации, добавив префикс / суффикс Icon к имени Icon?

imoort { LoadingOutlineIcon } from '@antd/icons';

<LoadingOutlineIcon  {...otherProps}/>

Пожалуйста, работайте над уменьшением размера пакета
https://github.com/ant-design/ant-design/issues/9419
При импорте Button добавляет в проект 95кб, что в 2019 году просто недопустимо. 👎

@vagusX Может, мне просто кажется, что имя длинновато? Я всегда думаю, что имя краткое и выглядит как небольшой компонент или относительно отдельный компонент. Если имя слишком длинное, это должен быть большой компонент (конечно, это неправильное ощущение ~ я знаю). . ~

Конечно, если я знаю, что это значок, просто чтобы увидеть <Icon /> , я также могу самостоятельно создать компонент <Icon /> , а затем обернуть значок antd при его использовании. Эффект почти такой же. ~ Я просто чувствую, что это все значки, и это действительно куча разрозненных имен. Это кажется немного странным. Разница в том, что раньше я знал сначала значок, затем я знал, что это за тип. Теперь я сначала знаю тип, а затем знаю, о, это значок ~

@ avalanche1, вы можете посмотреть результат анализа пакета из этого pr https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838 и размер компонента Button явно снижается

Хорошо знать. Но на ваших скриншотах нет указания на реальные размеры, поэтому я не могу ни подтвердить, ни опровергнуть.

Я собираюсь перенести Form на новые API-интерфейсы, но обнаружил, что версия field-form нестабильна, поэтому я хочу знать, будут ли в будущем внесены критические изменения в эти интерфейсы.

@orzyyyy ,
antd выпускает версию 4.0-alpha.x для добровольцев из социальных сетей и внутренних организаций, чтобы протестировать ее. Если от альфа-версии нет отрицательных отзывов, этот API будет последним при выпуске.

@ avalanche1 @ant-design/icons v4-альфа-версия поддерживает встряхивание дерева, поэтому размер пакета зависит от того, сколько значков вы использовали в своем собственном проекте, используете ли вы компонент antd, который импортирует значки внутри, или вы используете @ant-design/icons напрямую, так что, возможно, я не могу понять вашу озабоченность по этому поводу.

Почему мы говорим о значках, когда мой первоначальный пост был о кнопках, календаре и других компонентах? https://github.com/ant-design/ant-design/issues/9419

Значение DatePicker должно быть моментом, можно удалить момент? Если я обновлю из, я должен преобразовать в момент

Что касается moment , вот мои соображения. DatePicker по-прежнему использует moment по умолчанию из-за требований совместимости, но предоставляет фабричную функцию для создания с другой библиотекой даты:

import DatePicker, { createPicker } from 'antd/lib/date-picker';

import dayjs from 'dayjs';

const basicDemo = <DatePicker />

const MyDatePicker = createPicker(dayjs, {
  // Some proxy function, maybe can provided by default...
  format(dayObj, formatStr) {
    return ...;
  },
  parse(str, formatStr) {
    return ...;
  },
});

const dayDemo = <MyDatePicker />;

Просто подумал, приветствую обсуждение.

Пришло время избавиться от

  1. Moment.js никогда не станет древовидным из-за его сложного ООП API. (Им нужно было бы переписать это с нуля). Это огромные накладные расходы для antd и пользователей.

  2. Ant Design v4 - это крупный выпуск с критическими изменениями. Сейчас самое время!

  3. Предлагаю не заменять его другой библиотекой. Antd может использовать внутри себя что-то маленькое, например dayjs или date-fns но он должен принимать собственные объекты Date или строки для своих компонентов.

Каждый раз, когда вы называете moment() , умирает щенок ..

:собака:

@zombieJ хотел бы знать, как развивается компонент "Таблица". Доступна ли предварительная версия, например форма? Меня вообще чуть не вырвало кровью😂

Альфа-версия уже включает новую таблицу? Если да, то на сайте предварительного просмотра должен быть его пример?

Таблица в очереди, сейчас работаю над виртуальным списком.

А как насчет поддержки стилизованных компонентов?

Формы initialValues ​​не устанавливают moment . https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

Я надеюсь, что Form может предоставить неконтролируемую версию для решения проблемы производительности больших форм, таких как Excel.

Есть ли шанс, что альфа-документацию можно будет перенести на обычный сайт документации Ant?

Мой работодатель блокирует домены Netlify, и я предполагаю, что другие тоже могут.

Есть ли конкретный план поддержки работы с клавиатурой в меню и раскрывающемся списке?

Есть ли шанс, что альфа-документацию можно будет перенести на обычный сайт документации Ant?

Мой работодатель блокирует домены Netlify, и я предполагаю, что другие тоже могут.

Почему? смешно

Есть надежда, что компонент Table будет напоминать компонент Table элемента. Каждый столбец сначала будет автоматически устанавливать ширину. Предлагается изменить символ заголовка таблицы на min-width вместо изменения строки. Надеемся, что сворачивание и функции прокрутки могут использоваться одновременно.Делается надеяться, что древовидная таблица будет напоминать TreeSelect, когда будет сделано несколько вариантов.

Я надеюсь, что компонент Table может быть похож на компонент Table элемента Element. Каждый столбец сначала автоматически устанавливает ширину. Рекомендуется изменить символ заголовка таблицы на min-width без переноса. Я надеюсь, что функцию сворачивания и функцию прокрутки можно использовать одновременно. Я надеюсь, что древовидная таблица имеет несколько вариантов выбора. , Может быть похож на TreeSelect

Есть ли шанс, что с v4 или, может быть, v5 вы что-то сделаете с настройкой? MaterialUI намного проще настроить, что делает его выбором для проекта, над которым я работаю, даже если я действительно хотел бы использовать AntD, поскольку он намного более полный и т. Д.
Пожалуйста, бросьте меньше на что-то получше для настройки.

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

  • rc-select (пришлось заменить на Downshift и применить стили antd поверх)
  • rc-tabs (см. # 18798)
  • и, возможно, другие, которые мы пока не используем

Насколько велико управление у antd над rc-компонентами и сможет ли команда исправить это своевременно для выпуска 4.0? Доступность всегда будет относительно не приоритетной, но правда в том, что игнорировать ее становится все труднее, поскольку предприятия становятся юридически обязанными предоставлять доступные приложения сотрудникам / клиентам.

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

MaterialUI намного проще настроить

@murbanowicz не могли бы вы уточнить? Мне любопытно, почему вы так думаете.

@abenhamdine Нет проблем!
В MUI есть ThemeProvider который вы оборачиваете свое приложение и настраиваете всю тему только с помощью объекта JS, который набран в TypeScript, так что с ним так приятно работать.

В AntD для настройки вам нужно возиться с LESS или SASS (с некоторыми плагинами), поэтому вам нужно поддерживать другие зависимости и т. Д., Вам нужно пройти через источник компонентов, чтобы найти переменную, которую вы хотите изменить для конкретного компонента и т. Д.
Кроме того, нет хорошего способа изменить тему во время выполнения, что так просто с MUI, просто переключив объект JS, который можно легко получить с сервера и т. Д.

В основном, когда вы ищете настройки AntD и MUI, вы найдете простые примеры в MUI, потому что здесь не о чем говорить, поскольку это прямолинейно, но когда вы используете Google для настройки AntD, вы найдете множество хакерских решений и т.

Я люблю AntD за комплектность и так много отличных компонентов, но настройка действительно плохая, и, исходя из моего опыта и разговоров с другими разработчиками, она должна быть одним из ключевых моментов в дорожной карте.

@abenhamdine Нет проблем!
В MUI есть ThemeProvider который вы оборачиваете свое приложение и настраиваете всю тему только с помощью объекта JS, который набран в TypeScript, так что с ним так приятно работать.

В AntD для настройки вам нужно возиться с LESS или SASS (с некоторыми плагинами), поэтому вам нужно поддерживать другие зависимости и т. Д., Вам нужно пройти через источник компонентов, чтобы найти переменную, которую вы хотите изменить для конкретного компонента и т. Д.
Кроме того, нет хорошего способа изменить тему во время выполнения, что так просто с MUI, просто переключив объект JS, который можно легко получить с сервера и т. Д.

В основном, когда вы ищете настройки AntD и MUI, вы найдете простые примеры в MUI, потому что здесь не о чем говорить, поскольку это прямолинейно, но когда вы используете Google для настройки AntD, вы найдете множество хакерских решений и т.

Я люблю AntD за комплектность и так много отличных компонентов, но настройка действительно плохая, и, исходя из моего опыта и разговоров с другими разработчиками, она должна быть одним из ключевых моментов в дорожной карте.

ясное и точное объяснение, спасибо!

@abenhamdine Нет проблем!
В MUI есть ThemeProvider который вы оборачиваете свое приложение и настраиваете всю тему только с помощью объекта JS, который набран в TypeScript, так что с ним так приятно работать.

В AntD для настройки вам нужно возиться с LESS или SASS (с некоторыми плагинами), поэтому вам нужно поддерживать другие зависимости и т. Д., Вам нужно пройти через источник компонентов, чтобы найти переменную, которую вы хотите изменить для конкретного компонента и т. Д.
Кроме того, нет хорошего способа изменить тему во время выполнения, что так просто с MUI, просто переключив объект JS, который можно легко получить с сервера и т. Д.

В основном, когда вы ищете настройки AntD и MUI, вы найдете простые примеры в MUI, потому что здесь не о чем говорить, поскольку это прямолинейно, но когда вы используете Google для настройки AntD, вы найдете множество хакерских решений и т.

Я люблю AntD за комплектность и так много отличных компонентов, но настройка действительно плохая, и, исходя из моего опыта и разговоров с другими разработчиками, она должна быть одним из ключевых моментов в дорожной карте.

Я согласен с @murbanowicz, что настройка с помощью Antd может быть немного запутанной (утечка глобального стиля, хакерский способ использования Sass, конфликты приоритетов между переопределениями стилей, довольно много внешних зависимостей, таких как moment приводит к огромному размеру пакета ), но, долгое время используя MUI, я считаю, что Antd гораздо более настраиваемый.

Я не в курсе новых выпусков MUI, но в прошлый раз, когда я проверил, были некоторые компоненты, которые вы не смогли настроить, поскольку MUI использует styled-components , если разработчики не добавили classNames везде, вы не могли просто выбрать точное имя класса компонента и переопределить его своим собственным стилем.
Тематика - это круто для прямого использования библиотеки, но если вы хотите адаптировать стиль к своей системе дизайна, с MUI это очень беспорядочно, иногда даже невозможно;)

Но все же antd действительно требует некоторой работы, чтобы упростить настройку;)

@filipjnc ,
rc-select выпустила альфа-версию, которая улучшает доступность. Вы можете помочь проверить это. И ветка подготовки v4 использовала его, вы можете увидеть предварительный просмотр вверху.
Для rc-tabs , поскольку он не является главным приоритетом, я также улучшу его, но позже.

@zombieJ, хорошо, я посмотрю на rc-select alpha.

Несмотря на то, что rc-tabs не является приоритетом, не могли бы вы взглянуть на мой запрос на перенос, где я исправляю наиболее критические моменты из результатов нашего теста доступности?

У меня проблема. Согласно текущему методу реформирования значков, если есть форма компонента antd и значок
Когда форма вводится одновременно, можно ли указать только один из псевдонимов?

@zkwolf Да, мы переименовываем иконку: https://github.com/ant-design/ant-design-icons/pull/118

cc @vagusX

Я бы очень хотел, чтобы проблема с постоянной перерисовкой

Обратите внимание, что на https://next.ant.design Компоненты не отсортированы в алфавитном порядке на боковой панели компонентов.
Schermata 2019-09-30 alle 18 01 03

Как вы, возможно, знаете, муравьиный дизайн не очень хорош с точки зрения доступности. Для большинства людей это не слишком заметно на поверхности, но становится большой проблемой, когда вы погружаетесь глубже. Посмотрите, насколько плохо ant-design набирает очки здесь: https://darekkay.com/blog/accessible-ui-frameworks/

Хорошая новость в том, что, поскольку я очень люблю муравьиный дизайн и собираюсь использовать его в корпоративных проектах, моя цель - вывести его на первое место в списке.

Я позволил агентству протестировать одно из моих корпоративных приложений для клиента в Германии (где доступность является огромной темой в крупных компаниях). Самыми критическими вещами были:

  1. Специальные возможности программы чтения с экрана для основных, но важных компонентов, таких как Select, Autocomplete и Tabs
  2. Цветовые контрасты во многих местах
  3. Клавиатурная навигация в некоторых местах

Сначала я выбрал rc-tabs как быстрый способ исправить все его проблемы с доступностью - он должен скоро выйти (https://github.com/react-component/tabs/pull/218). Но больше всего меня беспокоит rc-select , особенно его часть со списком (автозаполнение). Комбинированные списки - один из самых сложных аспектов доступности программы чтения с экрана, и здесь легко ошибиться. Чтобы исправить все проблемы, требуются не только некоторые настройки свойств aria, но и серьезный пересмотр.

Чтобы быстро исправить это в моем приложении перед запуском, я заменил функции Select и AutoComplete в ant-design ( rc-select ) моими собственными компонентами на основе https://github.com/downshift-js/downshift. Я просто воспроизвел лучшие практики ARIA и применил стили antd поверх - выглядит почти так же, и это совершенно доступно.

Итак, провокационный вопрос: не могли бы вы отказаться от двойной работы и отказаться от rc-select в пользу более популярной и полной библиотеки downshift ? Вы можете сэкономить время в команде и сосредоточиться на совершенствовании других основных компонентов, которым нет хороших альтернатив на рынке открытого исходного кода.

Мне эта идея кажется фантастической @filipjnc . Кроме того, при понижении передачи это 1/4 размера rc-select. Я надеюсь, что команда antd сможет это сделать.

Я бы хотел увидеть больше улучшений цветов в версии 4.0. В частности, в документации упоминается «Цветовая палитра визуализации данных (скоро появится)», которая будет очень полезна для информационных панелей и других приложений с большим объемом данных. Теплые и холодные оттенки серого также помогут создать более связную цветовую палитру. Кроме того, это хорошая возможность исправить цветовой контраст для доступности (как упоминалось @filipjnc). Продолжайте в том же духе

Как вы, возможно, знаете, муравьиный дизайн не очень хорош с точки зрения доступности. Для большинства людей это не слишком заметно на поверхности, но становится большой проблемой, когда вы погружаетесь глубже. Посмотрите, насколько плохо ant-design набирает очки здесь: https://darekkay.com/blog/accessible-ui-frameworks/

Хорошая новость в том, что, поскольку я очень люблю муравьиный дизайн и собираюсь использовать его в корпоративных проектах, моя цель - вывести его на первое место в списке.

Я позволил агентству протестировать одно из моих корпоративных приложений для клиента в Германии (где доступность является огромной темой в крупных компаниях). Самыми критическими вещами были:

1. Screen reader accessibility for basic but crucial components like Select, Autocomplete and Tabs

2. Color contrasts in many places

3. Keyboard navigation in some places

Сначала я выбрал rc-tabs чтобы быстро исправить все его проблемы с доступностью - он должен скоро выйти ( response-component / tabs # 218 ). Но больше всего меня беспокоит rc-select , особенно его часть со списком (автозаполнение). Комбинированные списки - один из самых сложных аспектов доступности программы чтения с экрана, и здесь легко ошибиться. Чтобы исправить все проблемы, требуются не только некоторые настройки свойств aria, но и серьезный пересмотр.

Чтобы быстро исправить это в моем приложении перед запуском, я заменил Select и AutoComplete в ant-design ( rc-select ) моими собственными компонентами, основанными на https://github.com/downshift-js/downshift. Я просто воспроизвел лучшие практики ARIA и применил стили antd поверх - выглядит почти так же, и это совершенно доступно.

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

Я бы не был в восторге от понижения передачи, см. Https://github.com/downshift-js/downshift/issues/730
Доступность важна для некоторых пользователей, но производительность важна еще для большего числа пользователей.

Таблица в очереди, сейчас работаю над виртуальным списком.

привет, @zombieJ
Есть ли какие-либо улучшения в сводном нижнем колонтитуле?

@ alexchen1875 ,
В ожидании нового обновления кода жизненного цикла. Таблица следующая после готового :)

4.0 Можно ли изменить некоторые параметры реквизита на верблюжий футляр? Например, Input.TextArea в autosize заменяется на autoSize ?
Все свойства нативных HTML-тегов в React верблюжьи, такие как <input autoComplete /> , этот autosize всегда выглядит несогласованным. . .

Его можно изменить в 3.x, совместить с исходным использованием и отказаться от него. @ jinliming2 Вас интересует пиар?

  • 4.0. Зачем отмечать props.children в Tree как устаревший api и вместо этого рекомендовать метод чистых данных treeData. Я считаю, что props.children очень полезен и удобен для игры
  • ComponentWillReceiveProps был отмечен как устаревший в последнем API-интерфейсе React. Было обнаружено, что компонент таблицы и компонент Animate все еще существуют во время пробной версии.

+1 за доступность. Пожалуйста!

Говоря о размере четкого значка, кажется, что значок других компонентов составляет 12 пикселей, а указатель даты - 14 пикселей. Учитывается ли разница между размером других чистых компонентов и значком суффикса, или это потому, что указатель даты является переключателем значка, и это 14 пикселей?Планируете ли вы унифицировать размер

@zombieJ планирует добавить функцию сортировки таблиц по нескольким столбцам

пожалуйста, напишите на английском

Будет ли решена проблема слишком большого момента?

Будет ли решена проблема слишком большого момента?

Сначала попробуйте использовать dayjs

Может быть на английском? Учитывая чувства иностранцев, я всегда перевожу гугл. Не важно, что грамматика нестандартная, слова понятны им

@ afc163
Вы считали, что за этим репо следят иностранцы? К сожалению, Google Translate - не лучший инструмент для понимания того, что вы говорите. Я понимаю, что большинство разработчиков и пользователей Ant-Design - китайцы, но считаете ли вы также некитайцев?
Поэтому я призываю вас использовать международный язык, чтобы уважать всех нас.

Привет,
Я хотел попробовать Ant Design 4.0 с приложением create-react-app и Typescript.
Я выполнил инструкции на https://next.ant.design/docs/react/introduce, но не могу получить работающее приложение.
Выполнение базовой инструкции ( import Button from 'antd/es/button'; ) для create-response-app вызывает ошибку:

не удается найти модуль antd / es / button

После добавления response-app-rewired, customize-cra, babel-plugin-import и изменения импорта на import {Button} from 'antd' я получаю сообщение об ошибке:

Не удалось найти файл декларации для модуля antd

Не могли бы вы дать мне совет, как заставить antd4 работать с приложением crea-react-app и машинописным текстом?

@gynekolog ,
Пожалуйста, проверьте, правильно ли установлен node_modules .

ссылка https://codesandbox.io/s/cool-paper-4y1u7

@lvlohammadi К сожалению, некоторые китайцы, такие как я, недостаточно хорошо сил постараюсь использовать международный язык для участия в общении с сообществом.

@gynekolog ,
Пожалуйста, проверьте, правильно ли установлен node_modules .

ссылка https://codesandbox.io/s/cool-paper-4y1u7

Вы правы. я бегу

yarn add "https://github.com/ant-design/ant-design.git#4.0-prepare"

вместо

yarn add "[email protected]"

Позор ...
Спасибо.

dropdownMatchSelectWidth при выборе разрыва компонента в альфа-версии, действует в предыдущей версии

Если я начну новый проект с помощью antd, вы выберете альфа-версию 3 или 4? Насколько "готовая к производству" версия 4? Вы все еще стремитесь к выпуску четвертого квартала?

Если я начну новый проект с помощью antd, вы выберете альфа-версию 3 или 4? Насколько "готовая к производству" версия 4? Вы все еще стремитесь к выпуску четвертого квартала?

Antd 4 еще не готов к производству. Вам следует начать с antd 3, переход должен быть легким (особенно, если codemods предоставляются должным образом).

Я надеюсь увидеть полное разделение между логикой и отображением, то есть, кроме манипулирования именами классов, js больше ничего не делает с представлением. Внешний вид должен обрабатываться CSS (МЕНЬШЕ). Кроме того, вместо компонентов React можно использовать веб-компоненты, чтобы разработчики, не работающие на React, могли использовать их более легко.

Я надеюсь увидеть полное разделение между логикой и отображением, то есть, кроме манипулирования именами классов, js больше ничего не делает с представлением. Внешний вид должен обрабатываться CSS (МЕНЬШЕ). Кроме того, вместо компонентов React можно использовать веб-компоненты, чтобы разработчики, не работающие на React, могли использовать их более легко.

Я считаю эту идею все очищать бессмысленной. Лучше сосредоточиться на чем-то более важном.

Есть ли планы для множественного выбора в AutoComplete, например https://react-select.com?

Я надеюсь увидеть полное разделение между логикой и отображением, то есть, кроме манипулирования именами классов, js больше ничего не делает с представлением. Внешний вид должен обрабатываться CSS (МЕНЬШЕ). Кроме того, вместо компонентов React можно использовать веб-компоненты, чтобы разработчики, не работающие на React, могли использовать их более легко.

Я считаю эту идею все очищать бессмысленной. Лучше сосредоточиться на чем-то более важном.

Не думаю, что есть более неотложный вопрос, чем разлука. В команде CSS обычно обрабатывают дизайнеры, а JS - кодеры. Если позволить обоим манипулировать стилем, это приведет к хаосу и ненужной потере времени на разработку.

Возьмем, к примеру, Menu, ширина и высота по умолчанию устанавливаются JS, проблема в том, что когда кто-то хочет изменить ширину или высоту внешней оболочки, меню будет либо торчать, либо иметь пробелы. Это потребует исправления как дизайнера, так и кодировщика, что означает простои.

Кроме того, как компоненты, код не слишком сложен, разделение не должно требовать слишком больших усилий, но результат значительно упростит жизнь пользователям и самой команде ant.design.

Еще одна небольшая проблема: Icon должен по умолчанию иметь значение 16 пикселей, а не 14 пикселей, что является глобальным размером шрифта по умолчанию. Это означает, что Icon должен использовать такие переменные, как @ default-icon-size, @ icon-size-lg и т. Д., Отдельно от текста. На самом деле это не ошибка, а потерянная функция.

@ afc163
Вы считали, что за этим репо следят иностранцы? К сожалению, Google Translate - не лучший инструмент для понимания того, что вы говорите. Я понимаю, что большинство разработчиков и пользователей Ant-Design - китайцы, но считаете ли вы также некитайцев?
Поэтому я призываю вас использовать международный язык, чтобы уважать всех нас.

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

Парни, есть ли в And Design версии 4.0 JSS вместо _Less_ для генерации CSS?

Парни, есть ли в And Design версии 4.0 JSS вместо _Less_ для генерации CSS?

AFAIK, нет. Но вы можете попробовать использовать стилизованные компоненты (например) в дополнение к less.

Спасибо, дорогой @ tomgao365 , я создаю проблему, на которую вы ссылались. Я хочу сделать отличный пиар для удаления Less полностью и вместо этого использовать JSS . Работа над версией 3 - не очень хорошая идея, потому что многие проекты были сделаны с использованием версии 3, поэтому я решил поработать над внедрением JSS в версии 4.

Кроме того, у меня есть небольшой вопрос, дорогой @abenhamdine , что вы JSS вместо использования Less?

Кроме того, у меня есть небольшой вопрос, дорогой @abenhamdine , что вы

Основные преимущества на мой взгляд:

  • динамический стиль (меньше боли)
  • автозаполнение (не уверен в этом, зависит от того, какой инструментарий / библиотеку JSS вы используете)
  • наследование стилей

стоит попробовать.
Но это не серебряная пуля.

Уважаемый @abenhamdine , я оставляю вопрос с значком Discussion . Это номер 19181.

И я хочу начать внедрять JSS и опустить Less, но скоро будет новая версия, и я боюсь, что все мои усилия будут потрачены зря.

Рад видеть обсуждение замены moment.js на какую-то альтернативу, такую ​​как Day.js или собственный объект Date здесь https://github.com/ant-design/ant-design/issues/19738

Будет ли более простой способ изменить цветовые темы с помощью приложения create-react-app в версии 4?

Я согласен с @flashtheman, что было бы неплохо переопределить тему без необходимости работы с меньшим количеством переменных - то есть что-то вроде ThemeProvider от эмоций: https://emotion.sh/docs/theming

В эпоху jQuery настройки темы очень популярны, и пользователям нравится их использовать.
Я ждал простого способа изменить тему в производственной среде более 2 лет.

В новой версии компонента значка, если значок определяется динамически, как с ним обращаться в новой версии? На данный момент я могу думать только об использовании строк переменных require +. Оказывается, только атрибут типа должен быть заполнен переменными. Есть ли другой способ справиться с этим?
google translate: в новой версии компонента значка, если значок определяется динамически, то как с ним работать в новой версии, на данный момент можно думать только о строке переменной require +, исходной нужно только заполнить атрибут типа с переменными, какие еще методы обработки?

В новой версии компонента значка, если значок определяется динамически, как с ним обращаться в новой версии? На данный момент я могу думать только об использовании строк переменных require +. Оказывается, только атрибут типа должен быть заполнен переменными. Есть ли другой способ справиться с этим?
google translate: в новой версии компонента значка, если значок определяется динамически, то как с ним работать в новой версии, на данный момент можно думать только о строке переменной require +, исходной нужно только заполнить атрибут типа с переменными, какие еще методы обработки?

Попробуйте https://github.com/smooth-code/loadable-components, рекомендованные в документации React.

Когда выйдет официальная версия?

4.0. Поддерживает ли таблица функцию поворота?

@ afc163 - Похоже, глобальное загрязнение стиля - это проблема номер 1, которую хотят люди с новым выпуском. Есть ли у вас кто-то над этим работать? Буду рад проделать эту работу и помочь. Это не должно быть сложно, просто потребуется некоторое усилие. Я тоже страдаю этой проблемой с Ant Design. Я хочу решить это.

Ведется ли работа по уменьшению размера компонентов?
На этот раз: зачем, если мне нужен простой Button - я должен импортировать весь файл antd.css ??

Ведется ли работа по уменьшению размера компонентов?
На этот раз: зачем, если мне нужен простой Button - я должен импортировать весь файл antd.css ??

@ avalanche1 См. https://ant.design/docs/react/introduce#Usage

Используйте модульный antd

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

@ banxi1988

https://github.com/ant-design/ant-design/blob/c824569ea0810e2cf11bc2953b333eb0e404fd1c/components/upload/interface.tsx#L47 -L52

Если требуется отображение скорости, onChange вернет процент загруженного файла. Вы можете рассчитать скорость загрузки.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Это должно остановить всю поддержку IE, прекратить поддержку IE11 слишком радикально, хотя я тоже поддерживаю это.

Вы все еще можете сделать это с помощью резервной поддержки. Пример: color: var(--red, @red); Решить эту проблему можно с помощью простого глобального поиска / замены всех текущих переменных.

Рассматривается ли отказ от LESS в пользу SASS или другого лучшего решения для стилизации для версии 4 или нет?

@murbanowicz , Привет, спасибо за ваш комментарий, я оставляю вопрос об использовании JSS вместо Less и здесь я показываю свою готовность к этой миграции, но никто не показывает никаких действий.

Привет, @zombieJ , спасибо за отличную работу над Ant Design? Есть ли планы предоставить нестандартный способ переключения темной темы в приложении?

Предложение по компоненту формы:
Я очень рад видеть, что в новой версии 4.0 компонент формы будет более удобным для разработчиков. Я увидел новый пример, компонент Form.Item, расположенный ниже компонента Form, больше не должен использовать getFieldDecorator. Это очень хорошее улучшение, но у меня есть более радикальное предложение: удалить компонент Form.Item, дополнительно оптимизировать процесс написания кода и сделать код более свежим. Исходные функции компонента Form.Item напрямую передаются определенным компонентам ввода (таким как Input, DataPick и т. Д.).
Это сделано для того, чтобы принять во внимание, что в большинстве случаев разработанные формы используют встроенные компоненты ввода antd, которые подходят для реализации функции компонента Form.Item путем расширения возможностей компонентов ввода; и для некоторых особых случаев (таких как пользовательское самообслуживание) Определите компоненты, некоторые компоненты ввода не хотят быть привязанными к форме), вы можете предоставить специальные компоненты упаковки для инструкций.
Исследование antd не является всесторонним и предлагает только предложения по апелляции с точки зрения обычных пользователей. Если что-то не так, пожалуйста, Haihan.

Предложение по компоненту формы:
Я очень рад видеть, что в новой версии 4.0 компонент формы будет более удобным для разработчиков. Я увидел новый пример, компонент Form.Item, расположенный ниже компонента Form, больше не должен использовать getFieldDecorator. Это очень хорошее улучшение, но у меня есть более радикальное предложение: удалить компонент Form.Item, дополнительно оптимизировать процесс написания кода и сделать код более свежим. Исходные функции компонента Form.Item напрямую передаются определенным компонентам ввода (таким как Input, DataPick и т. Д.).
Это сделано для того, чтобы принять во внимание, что в большинстве случаев разработанные формы используют встроенные компоненты ввода antd, которые подходят для реализации функции компонента Form.Item путем расширения возможностей компонентов ввода; и для некоторых особых случаев (таких как пользовательское самообслуживание) Определите компоненты, некоторые компоненты ввода не хотят быть привязанными к форме), вы можете предоставить специальные компоненты упаковки для инструкций.
Исследование antd не является всесторонним и предлагает только предложения по апелляции с точки зрения обычных пользователей. Если что-то не так, пожалуйста, Haihan.

@shengliangli считает, что связь слишком сильна. . .

Предложение по компоненту формы:
Я очень рад видеть, что в новой версии 4.0 компонент формы будет более удобным для разработчиков. Я увидел новый пример, компонент Form.Item, расположенный ниже компонента Form, больше не должен использовать getFieldDecorator. Это очень хорошее улучшение, но у меня есть более радикальное предложение: удалить компонент Form.Item, дополнительно оптимизировать процесс написания кода и сделать код более свежим. Исходные функции компонента Form.Item напрямую передаются определенным компонентам ввода (таким как Input, DataPick и т. Д.).
Это сделано для того, чтобы принять во внимание, что в большинстве случаев разработанные формы используют встроенные компоненты ввода antd, которые подходят для реализации функции компонента Form.Item путем расширения возможностей компонентов ввода; и для некоторых особых случаев (таких как пользовательское самообслуживание) Определите компоненты, некоторые компоненты ввода не хотят быть привязанными к форме), вы можете предоставить специальные компоненты упаковки для инструкций.
Исследование antd не является всесторонним и предлагает только предложения по апелляции с точки зрения обычных пользователей. Если что-то не так, пожалуйста, Haihan.

@shengliangli считает, что связь слишком сильна. . .

Я думаю, что Form.Item - это «дополнительный» компонент, добавленный antd для реализации функции привязки данных компонента Form.Для такой реализации есть причины, но, в конце концов, добавляется дополнительная вещь. Подобно тому, как все критикуют проблему слишком большого количества модульного кода в redux, разработчикам может не понравиться такой способ написания. Если функцию связывания данных, реализованную с помощью form.item, можно понять как характеристики компонентов ввода, таких как ввод, чтобы расширить возможности компонентов ввода, кажется ли это более естественным?

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

Предложение по компоненту формы:
Я очень рад видеть, что в новой версии 4.0 компонент формы будет более удобным для разработчиков. Я увидел новый пример, компонент Form.Item, расположенный ниже компонента Form, больше не должен использовать getFieldDecorator. Это очень хорошее улучшение, но у меня есть более радикальное предложение: удалить компонент Form.Item, дополнительно оптимизировать процесс написания кода и сделать код более свежим. Исходные функции компонента Form.Item напрямую передаются определенным компонентам ввода (таким как Input, DataPick и т. Д.).
Это сделано для того, чтобы принять во внимание, что в большинстве случаев разработанные формы используют встроенные компоненты ввода antd, которые подходят для реализации функции компонента Form.Item путем расширения возможностей компонентов ввода; и для некоторых особых случаев (таких как пользовательское самообслуживание) Определите компоненты, некоторые компоненты ввода не хотят быть привязанными к форме), вы можете предоставить специальные компоненты упаковки для инструкций.
Исследование antd не является всесторонним и предлагает только предложения по апелляции с точки зрения обычных пользователей. Если что-то не так, пожалуйста, Haihan.

@shengliangli считает, что связь слишком сильна. . .

Я думаю, что Form.Item - это «дополнительный» компонент, добавленный antd для реализации функции привязки данных компонента Form.Для такой реализации есть причины, но, в конце концов, добавляется дополнительная вещь. Подобно тому, как все критикуют проблему слишком большого количества модульного кода в redux, разработчикам может не понравиться такой способ написания. Если функцию связывания данных, реализованную с помощью form.item, можно понять как характеристики компонентов ввода, таких как ввод, чтобы расширить возможности компонентов ввода, кажется ли это более естественным?

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

Я не особо согласен. Я думаю, что Form.Item - это в основном внешний пакет компонента, например атрибуты, такие как метка и столбец, которые действительно не подходят для встраивания в компоненты.

Привет @zombieJ
Интересно узнать, когда выйдет версия 4?
С нетерпением жду ответа

Как я тоже способствую дизайну.
Жду ответа от кого-то

Доступна бета.0 версия, значит ли это, что ее можно использовать?

Предложение по компоненту формы:
Я очень рад видеть, что в новой версии 4.0 компонент формы будет более удобным для разработчиков. Я увидел новый пример, компонент Form.Item, расположенный ниже компонента Form, больше не должен использовать getFieldDecorator. Это очень хорошее улучшение, но у меня есть более радикальное предложение: удалить компонент Form.Item, дополнительно оптимизировать процесс написания кода и сделать код более свежим. Исходные функции компонента Form.Item напрямую передаются определенным компонентам ввода (таким как Input, DataPick и т. Д.).
Это сделано для того, чтобы принять во внимание, что в большинстве случаев разработанные формы используют встроенные компоненты ввода antd, которые подходят для реализации функции компонента Form.Item путем расширения возможностей компонентов ввода; и для некоторых особых случаев (таких как пользовательское самообслуживание) Определите компоненты, некоторые компоненты ввода не хотят быть привязанными к форме), вы можете предоставить специальные компоненты упаковки для инструкций.
Исследование antd не является всесторонним и предлагает только предложения по апелляции с точки зрения обычных пользователей. Если что-то не так, пожалуйста, Haihan.

Прежде всего, вы должны знать, что это не имеет никакого отношения к тому, является он встроенным или нет. Использование так называемого встроенного компонента можно назвать случайным.
getFieldDecorator - это мост, который соединяет компонент формы и компонент ввода. Form.item передается в два атрибута value и onChange , а затем завернутый компонент передает value и onChange Эти два метода интерфейса взаимодействуют с внешним миром. Другими словами, любой компонент может стать параметром getFieldDecorator если реализованы value и onChange .Это типичная идея program to interface

PS: Я не читал исходный код, все вышеперечисленное - мое предположение после прочтения документа

Причина, по которой Form.Item может взаимодействовать с базовым Component , не имеет ничего общего с каким-то «встроенным» механизмом, как кто-то ожидает. Это обычная уловка в мире программирования под названием program to interface

По сути, компонент Form и базовый компонент согласовывают что-то вроде value и onChange . Они служат интерфейсом между двумя мирами для общения. Это хороший дизайн для разъединения

@dancerphil Может быть, вы сможете более подробно прояснить идею в официальной документации

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

Спасибо за участие в кодировании и попытках. Ваша помощь очень много значит :)


Всем привет, вышла бета версия. Если с API нет серьезных проблем с дизайном, дальнейшие изменения вноситься не будут. В бета-версии дизайнеры помогут настроить стиль пользовательского интерфейса v4, а мы сосредоточимся на исправлении ошибок. Добро пожаловать, чтобы помочь нам найти ошибки или получить другие отзывы.

Спасибо за участие в разработке и пробной работе. Ваша помощь очень значима :)


ссылка: http://new-issue.ant.design/

Как я тоже способствую дизайну.
Жду ответа от кого-то

@ ekeminimarkk001 может ссылаться: https://ant.design/docs/react/contributing

@zombieJ Все ли изменения, перечисленные в проблеме, были реализованы в бета-версии?

Предложение по компоненту формы:
Я очень рад видеть, что в новой версии 4.0 компонент формы будет более удобным для разработчиков. Я увидел новый пример, компонент Form.Item, расположенный ниже компонента Form, больше не должен использовать getFieldDecorator. Это очень хорошее улучшение, но у меня есть более радикальное предложение: удалить компонент Form.Item, дополнительно оптимизировать процесс написания кода и сделать код более свежим. Исходные функции компонента Form.Item напрямую передаются определенным компонентам ввода (таким как Input, DataPick и т. Д.).
Это сделано для того, чтобы принять во внимание, что в большинстве случаев разработанные формы используют встроенные компоненты ввода antd, которые подходят для реализации функции компонента Form.Item путем расширения возможностей компонентов ввода; и для некоторых особых случаев (таких как пользовательское самообслуживание) Определите компоненты, некоторые компоненты ввода не хотят быть привязанными к форме), вы можете предоставить специальные компоненты упаковки для инструкций.
Исследование antd не является всесторонним и предлагает только предложения по апелляции с точки зрения обычных пользователей. Если что-то не так, пожалуйста, Haihan.

Прежде всего, вы должны знать, что это не имеет никакого отношения к тому, является он встроенным или нет. Использование так называемого встроенного компонента можно назвать случайным.
getFieldDecorator - это мост, который соединяет компонент формы и компонент ввода. Form.item передается в два атрибута value и onChange , а затем завернутый компонент передает value и onChange Эти два метода интерфейса взаимодействуют с внешним миром. Другими словами, любой компонент может стать параметром getFieldDecorator если реализованы value и onChange .Это типичная идея program to interface

PS: Я не читал исходный код, все вышеперечисленное - мое предположение после прочтения документа

Прочитав ваши ответы, я должен сказать, что мое предложение по компоненту формы antd не слишком зрелое, но, с другой стороны, это предложение полностью отражает проблему с точки зрения обычного пользователя. Для компонента с такой высокой интенсивностью использования, как может быть удобнее разрабатывать и использовать, писать меньше кода и использовать более четкие и естественные выражения, - это мое страстное ожидание от antd.

С точки зрения пользователя, antd уже очень хорош: большинство компонентов можно использовать в том виде, в каком они есть, забыть о них, когда они израсходуются, и использовать их в следующий раз, когда они захотят их использовать. Причина этого эффекта неотделима от хорошего дизайна API и упаковки компонентов, но все же есть некоторые сценарии использования компонентов (например, from, table), и есть возможности для улучшения.

Antd - это всего лишь инструментальный компонент в проекте. Лучше не раскрывать собственный механизм реализации или умело скрывать и ассимилировать механизм реализации во внешнем API. Пользователи просто хотят использовать этот компонент, они хотят использовать его в наиболее удобной и естественной форме, и они не хотят быть экспертами по компоненту инструмента.

Возвращаясь к компоненту формы, в текущем API 3.x я на самом деле более склонен использовать uform на основе Ali. По сравнению с формой antd, uform требует меньше кода и более продуктивен. Конечно, uform больше похож на декларативный способ написания, который сильно отличается от формы antd и может не иметь большого значения для справки.

Как участник antd, немного неловко задавать такое количество требований, но из-за любви, я надеюсь, что так лучше, я надеюсь, что команда проекта меня понимает, и я надеюсь, что дальнейшая оптимизация разработки и использования компонента в соответствующей версии. .

Очень странный. Я вообще не использовал Icon, но я упаковал в него все icons-svg.
webpack-bundle-analyzer.png
Номер версии: 4.0.0-beta.0. Используются Babel-plugin-import и tree-shaking, но они бесполезны.

Очень странный. Я вообще не использовал Icon, но я упаковал в него все icons-svg.
webpack-bundle-analyzer.png
Номер версии: 4.0.0-beta.0. Используются Babel-plugin-import и tree-shaking, но они бесполезны.

Используйте эту конфигурацию

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Очень странный. Я вообще не использовал Icon, но я упаковал в него все icons-svg.
webpack-bundle-analyzer.png
Номер версии: 4.0.0-beta.0. Используются Babel-plugin-import и tree-shaking, но они бесполезны.

Используйте эту конфигурацию

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Спасибо за ответ, но я работал не по вашей конфигурации.

Версия: 4.0.0-beta.0
Проблема: при переключении видимого компонента Modal страница будет переворачиваться и воспроизводить адрес:

@xiaoxintang Исправлено в главной ветке, ожидает слияния.

@ afc163 Как мне установить antd4.0 beta

https://next.ant.design/ положил трубку

@ afc163 Как мне установить antd4.0 beta

npm install [email protected]
ИЛИ ЖЕ
yarn add [email protected]

Похоже, сайт превью сломан. Я получаю только ошибку " Страница не найдена" .

Предложение по компоненту формы:
Я очень рад видеть, что в новой версии 4.0 компонент формы будет более удобным для разработчиков. Я увидел новый пример, компонент Form.Item, расположенный ниже компонента Form, больше не должен использовать getFieldDecorator. Это очень хорошее улучшение, но у меня есть более радикальное предложение: удалить компонент Form.Item, дополнительно оптимизировать процесс написания кода и сделать код более свежим. Исходные функции компонента Form.Item напрямую передаются определенным компонентам ввода (таким как Input, DataPick и т. Д.).
Это сделано для того, чтобы принять во внимание, что в большинстве случаев разработанные формы используют встроенные компоненты ввода antd, которые подходят для реализации функции компонента Form.Item путем расширения возможностей компонентов ввода; и для некоторых особых случаев (таких как пользовательское самообслуживание) Определите компоненты, некоторые компоненты ввода не хотят быть привязанными к форме), вы можете предоставить специальные компоненты упаковки для инструкций.
Исследование antd не является всесторонним и предлагает только предложения по апелляции с точки зрения обычных пользователей. Если что-то не так, пожалуйста, Haihan.

Вы можете попробовать это: https://github.com/aweiu/ant-modifier

Есть ли какие-нибудь оптимизации для загрязнения глобального стиля?

Есть ли какие-нибудь оптимизации для загрязнения глобального стиля?

Antd вроде бы есть приставки, это не загрязнение.Код css вашего собственного проекта может попробовать использовать css-модули для решения проблемы глобального загрязнения

Есть ли какие-нибудь оптимизации для загрязнения глобального стиля?

Antd вроде бы есть приставки, это не загрязнение.Код css вашего собственного проекта может попробовать использовать css-модули для решения проблемы глобального загрязнения

Я знаю этот префикс. Я имею в виду загрязнение глобальной части сброса css, которая является проблемой загрязнения, вызванной введением antd и css reset в устаревшие проекты.

Есть ли какие-нибудь оптимизации для загрязнения глобального стиля?

Antd вроде бы есть приставки, это не загрязнение.Код css вашего собственного проекта может попробовать использовать css-модули для решения проблемы глобального загрязнения

Подробности см. В обсуждении проблемы на официальном сайте по ссылке: https://ant.design/docs/react/faq-cn#antd -% E8% A6% 86% E7% 9B% 96% E4% BA% 86% E6% 88 % 91% E7% 9A% 84% E5% 85% A8% E5% B1% 80% E6% A0% B7% E5% BC% 8F% EF% BC% 81

Планируется ли перенос макета Antd Pro 4.0 с Antd Pro 4.0?
Я столкнулся с ошибкой SiderMenu.js Icon.createFromIconfontCN в pro-layout при самостоятельном переносе проекта. Поскольку зависимость в pro-layout по-прежнему v3, я не знаю, как изменить зависимость. Кто-то, кто понимает, научит меня

Планируется ли перенос макета Antd Pro 4.0 с Antd Pro 4.0?
Я столкнулся с ошибкой SiderMenu.js Icon.createFromIconfontCN в pro-layout при самостоятельном переносе проекта. Поскольку зависимость в pro-layout по-прежнему v3, я не знаю, как изменить зависимость. Кто-то, кто понимает, научит меня

Поскольку в 4.0 значок был разделен, импорт необходимо изменить. Вы можете использовать next.ant.design, чтобы увидеть текущий документ api значка

Спасибо за ваш вклад в версию v4. Закрыто с момента выпуска версии 4.0.0-rc.0 : ref # 20661

StrictMode - это цель? Устаревший контекст необходимо перенести https://github.com/ant-design/ant-design/issues/9870

Можем ли мы оставить в репо и antd3, и antd4? Не может измениться везде, поскольку репо слишком велико, и это будет почти переписывание всей кодовой базы.
Также, если да, можем ли мы сохранить antd3 CSS в глобальном и antd4 CSS только для какой-то папки и ее дочерних элементов

Была ли эта страница полезной?
0 / 5 - 0 рейтинги