Ant Design 4.0 ist da!

Einführung

Wir haben die 4.0 rc Version auf SEE Conf veröffentlicht. Nach mehr als einem Monat der Erfassung und Anpassung von Feedback ist es Zeit, 4.0 zu veröffentlichen! Vielen Dank an alle, die in dieser Zeit Feedback, Vorschläge und Beiträge gegeben haben. Wir werden die Updates, die bereits in der rc -Version enthalten sind, und einige kürzlich hier veröffentlichte Updates kombinieren. Die vollständige aktualisierte Dokumentation finden Sie hier . v4-Dokumentadresse: https://ant.design

Es ist zu beachten, dass die v3-Version im Dezember 2019 in den Zweig 3.x-stable überging und in die Wartung ging. Wir werden noch ein halbes Jahr Wartungsarbeiten für die Version 3 durchführen. Wartungszeitraum ist Mai 2020.

Upgrade der Designspezifikation

Wir haben die abgerundeten Ecken der Basis von 4px auf 2px angepasst. Das Filet selbst ist ein Detail, und in der mittleren und Hintergrundszene haben wir Effizienz als oberste Priorität, sodass wir die visuellen Details der Schnittstelle reduzieren und die Effizienz beim Lesen von Schnittstelleninformationen verbessern. Darüber hinaus haben wir die Schatten angepasst, um sie mit echten Schatten konsistenter zu machen, und gleichzeitig die Informationshierarchie hervorgehoben.

Dunkles Thema

Wir haben das Farbsystem basierend auf der Version 3 aktualisiert, und Version 4 bietet ein dunkles Thema. Sie können auf der Seite auf die Funktion zum Wechseln des Themas klicken, um den Effekt des dunklen Themas anzuzeigen:

Randlose Komponente

In der täglichen Arbeit haben wir festgestellt, dass es in einigen Szenarien leichte Auswahlkomponenten gibt. Daher bieten wir einen neuen randlosen Stil, mit dem Entwickler diese Komponenten einfacher einbetten können, ohne den Stil zu überschreiben.

Kompatibilitätsanpassung

Ant Design 3.0 hat große Anstrengungen unternommen, um mit älteren IE-Versionen kompatibel zu sein. Laut Branchenstatistiken schrumpfen jedoch sowohl der globale als auch der inländische IE9 / 10-Browser mit Windows-Systemupdates. Wir haben die Unterstützung von IE 9/10 bei 4.0 eingestellt (werden aber weiterhin IE 11 unterstützen). Daher werden einige Komponenten mit geringer Leistung in der Vergangenheit auch mit den neuen CSS-Funktionen an Leistung gewinnen.

Gleichzeitig haben wir die Mindestversion von React, von der v4 abhängt, auf React 16.9 aktualisiert. Dies bedeutet, dass die v4-Version mehr Hooks bietet, um Ihren Code zu vereinfachen.

Darüber hinaus haben wir einige veraltete APIs entfernt, die in der Version 3 gewarnt wurden. Wir empfehlen dringend, dass Sie Ihr aktuelles Projekt auf die letzte Version von Version 3 aktualisieren und die veraltete API basierend auf der Warnmeldung aktualisieren.

Kleinere Größe

In antd @ 3.9.0 haben wir das SVG-Symbol eingeführt ( Warum das SVG-Symbol verwenden? ). Die Symbol-API, die den Zeichenfolgennamen verwendet, kann bei Bedarf nicht geladen werden. Daher wird die SVG-Symboldatei vollständig eingeführt, wodurch die Größe des verpackten Produkts erheblich erhöht wird. In 4.0 haben wir die Symbolverwendungs-API angepasst, um das Verwackeln von Bäumen zu unterstützen, und die Standardpaketgröße von Antant um ca. 150 KB (Gzipped) reduziert.

Die Verwendung von Legacy-Symbolen wird verworfen:

import { Icon, Button } from 'antd';

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

In 4.0 wird es auf Anfrage eingeführt:

  import { Button } from 'antd';

 // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

Darüber hinaus haben wir einige verwandte Abhängigkeiten entfernt, um die Größe des komprimierten Bundles zu verringern:

Komponenten neu schreiben

Formular neu schreiben

Form als Hochfrequenzkomponente verfügt über eine leicht redundante API. Der Benutzer muss die Formularinstanz über das HOC von Form.create abrufen und form.getFieldDecorator verwenden, um die Datenbindung für die Komponente durchzuführen. Darüber hinaus wird das gesamte Formular bei jeder Datenänderung neu gerendert, was die Leistung in Big-Data-Formularen beeinträchtigt. In der Version 4 wird Form mit einer Formularinstanz geliefert. Sie können Daten direkt über die Eigenschaft name von Form.Item binden und so Ihren Code vereinfachen:

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

Wir haben festgestellt, dass sich der Entwickler in den meisten Szenarien nur mit den Werten befasst, die das Formular erfolgreich übermittelt. Daher stellen wir onFinish , die erst nach Abschluss der Formularvalidierung ausgelöst werden, und validateFields werden nicht mehr benötigt.

Außerdem bietet Form die Hooks-Methode Form.useForm , mit der Sie das Formularbeispiel steuern können:

const [form] = Form.useForm();

React.useEffect(() => {
  form.setFieldValues({ ... });
});

<Form form={form} />

Gleichzeitig stellen wir die Form.List-Komponente zur Verfügung, damit Sie die Listenfelder einfach steuern können:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

Tabelle neu schreiben

Da wir die Mindestanforderungen für die Kompatibilität angepasst haben, haben wir die Implementierung fester Spalten im Stil von sticky geändert, wodurch der Leistungsverbrauch bei festen Spalten im Formular erheblich reduziert wurde. Für IE 11, der sticky nicht unterstützt, wird die Downgrade-Verarbeitung durchgeführt.

Gleichzeitig stellen wir eine neue summary API zur Verfügung, um den Effekt der Zusammenfassungszeile zu erzielen:

Der Sortierer bietet eine mehrspaltige Sortierfunktion:

Außerdem haben wir die zugrunde liegende Logik so angepasst, dass fixedColumn , expandable und scroll jetzt gemischt werden können. Bietet eine body API zum Anpassen von Implementierungen von Tabelleninhalten, mit denen Sie Effekte wie das virtuelle Scrollen implementieren können.

Neuer DatePicker, TimePicker und Kalender

Wir haben die Datumskomponente als Ganzes neu geschrieben, um sie von moment zu entkoppeln. Sie können Picker-Komponenten für benutzerdefinierte Datumsbibliotheken mithilfe der generate uns bereitgestellten Methode moment als Datumsbibliothek. Eine benutzerdefinierte Datumsbibliothek finden Sie hier .

Darüber hinaus bieten wir einen vollständigen Satz von Zeit-, Datums-, Wochen-, Monats-, Jahres- und entsprechenden Bereichswählern. Sie können es über die Picker-Eigenschaft festlegen, anstatt den speziellen Selektor über die gesteuerte Modusmethode zu implementieren:

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

Für die Bereichsauswahl haben wir auch die Interaktion optimiert. Sie können jetzt die Start- oder Endzeit individuell auswählen und das manuelle Datumseingabeerlebnis perfekt optimieren.

Benachrichtigungs- / Modal-Support-Hooks

In der Vergangenheit ist möglicherweise das Problem aufgetreten, dass die Aufrufmethoden Modal.xxx und Notification.xxx den Kontext nicht abrufen können. Dies liegt daran, dass wir zusätzlich eine React-Instanz über ReactDOM.render für diese syntaktischen Zucker erstellen, was auch das Problem des Kontextverlusts verursacht. In der neuen Version stellen wir die Hooks-Methode bereit, mit der Sie Knoten dort einfügen können, wo Sie den Kontext abrufen müssen:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Virtuelle Schriftrolle

In Version 4 haben wir Tree, TreeSelect und Select aktualisiert. Standardmäßig verwenden sie die virtuelle Bildlauftechnologie, um ihre Leistung für eine große Menge an Optionsrendering zu optimieren.

Lebende Demo

Darüber hinaus werden Tastaturinteraktion und Zugänglichkeit optimiert.

Weitere neue Features / Features / Optimierungen

• ConfigProvider bietet eine direction -Konfiguration zur Unterstützung der Internationalisierung von rtl Sprachen.
• Form und ConfigProvider unterstützen die Einstellung size einschließlich der Komponentengröße.
• Typografie fügt das Attribut suffix .
• Fortschritt fügt steps Unterkomponente hinzu.
• TextArea unterstützt onResize .
• Das Raster verwendet das Layout flex .
• ......

Sie können hier klicken, um das vollständige Aktualisierungsprotokoll anzuzeigen.

So aktualisieren Sie

Um das Upgrade so einfach wie möglich zu gestalten, behalten wir maximale Kompatibilität bei. Es gibt jedoch noch einige wichtige Änderungen, die beachtet werden müssen. Sie können zunächst versuchen, mit dem von uns bereitgestellten Codemod-Tool zu migrieren, und einige Teile, die nicht migriert werden können, manuell migrieren. Informationen zum Upgrade finden Sie im Dokument .

Über alles

Die Geburt von Ant Design 4.0 ist untrennbar mit den Beiträgen und der Unterstützung von Freiwilligen in der Gemeinde verbunden. Vielen Dank an @saeedrahimi für die Internationalisierung von rtl , @shaodahong Beiträge zu Kompatibilitätspaketen und an alle, die an der Unterstützung der Entwicklung beteiligt sind. Es ist Ihr Beitrag zu Open Source, der Ant Design noch besser macht!

Die offizielle Version von Ant Design 4.0 ist da!

Einführung

Wir haben die 4.0 rc Version anlässlich von SEE Conf veröffentlicht. Nach mehr als einem Monat der Erfassung und Anpassung von Feedback haben wir endlich die offizielle Version von 4.0 eingeführt! Vielen Dank an alle, die in dieser Zeit Feedback, Vorschläge und Beiträge gegeben haben. Wir werden die Updates kombinieren, die bereits in der rc -Version enthalten sind, und einige der wichtigeren Ergänzungen, die hier aufgelistet werden sollen. Das vollständig aktualisierte Dokument kann hier angeklickt werden . v4-Dokumentadresse: https://ant.design

Es ist zu beachten, dass die v3-Version in den Zweig 3.x-stable und im Dezember 2019 in den Wartungsstatus überging. Wir werden noch ein halbes Jahr Wartungsarbeiten für die v3-Version durchführen. Die Wartungsfrist endet im Mai 2020.

Upgrade der Designspezifikation

Wir haben das Grundfilet von 4px auf 2px angepasst. Bei den Middle- und Back-End-Produkten hat Effizienz oberste Priorität, und der Stil mit abgerundeten Ecken ist ein wichtiges Detail auf der Benutzeroberfläche. Kleinere abgerundete Ecken reduzieren die Schnittstellendetails visuell und verbessern die Effizienz beim Lesen von Informationen. Darüber hinaus haben wir den Schatten so angepasst, dass er dem tatsächlichen Schatten besser entspricht und gleichzeitig die Informationsebene besser widerspiegelt.

Dunkles Thema

Wir haben das Farbsystem basierend auf der Version 3 aktualisiert, und Version 4 bietet ein dunkles Thema. Sie können auf der Seite auf die Funktion zum Wechseln des Themas klicken, um den Effekt des dunklen Themas anzuzeigen:

Randlose Komponenten

In der Wirtschaft haben wir festgestellt, dass einige Szenarien über leichte Auswahlkomponenten verfügen. Daher bieten wir einen neuen randlosen Stil, mit dem Entwickler diese Komponenten einfacher einbetten können, ohne zusätzliche überschreibende Stile.

Kompatibilitätsanpassung

Ant Design 3.0 hat große Anstrengungen unternommen, um mit der alten Version von IE kompatibel zu sein. Laut Branchenstatistiken schrumpft jedoch sowohl der globale als auch der inländische Anteil des IE9 / 10-Browsers mit dem Windows-Systemupdate. Wir sind in Version 4.0 und unterstützen IE 9/10 nicht mehr (werden aber weiterhin IE 11 unterstützen). Daher werden einige Komponenten mit geringer Leistung in der Vergangenheit mit den neuen CSS-Funktionen auch Leistungsverbesserungen erzielen.

Gleichzeitig haben wir die Mindestversion von React, von der v4 abhängt, auf React 16.9 aktualisiert. Dies bedeutet, dass die v4-Version mehr Hooks bietet, um Ihren Code zu vereinfachen.

Darüber hinaus haben wir einige veraltete APIs entfernt, die in der Version 3 gewarnt wurden. Wir empfehlen dringend, dass Sie Ihr aktuelles Projekt auf die letzte Version von Version 3 aktualisieren und die veraltete API basierend auf den Warninformationen aktualisieren.

Kleinere Größe

In [email protected] haben wir das SVG-Symbol eingeführt ( warum das SVG-Symbol verwenden? ). Die Symbol-API, die die Benennung von Zeichenfolgen verwendet, kann bei Bedarf nicht geladen werden. Daher wird die SVG-Symboldatei vollständig eingeführt, wodurch die Größe des verpackten Produkts erheblich erhöht wird. In 4.0 haben wir die Symbolverwendungs-API angepasst, um das Verwackeln von Bäumen zu unterstützen und die Standardpaketgröße von antd um ca. 150 KB (Gzipped) zu reduzieren.

Die alte Version der Symbolverwendung ist veraltet:

import { Icon, Button } from 'antd';

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

4.0 wird die Methode der Einführung auf Anfrage übernehmen:

import { Button } from 'antd';

// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

Darüber hinaus haben wir verwandte Abhängigkeiten optimiert, um die Verpackungsgröße (Gzipped) zu reduzieren:

Komponentenwiederholung

Form wiederholen

Form ist eine häufig verwendete Komponente und ihre API ist leicht redundant. Der Benutzer muss die Formularinstanz über die HOC-Methode Form.create abrufen und die Komponentendaten mit form.getFieldDecorator binden. Darüber hinaus wird das gesamte Formular jedes Mal neu gerendert, wenn sich die Daten ändern, was die Leistung im Big-Data-Formular beeinträchtigt. In der v4-Version verfügt Form über eine eigene Formularinstanz, und Sie können die Datenbindung direkt über die Eigenschaft name von Form.Item durchführen, um Ihren Code zu vereinfachen:

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

Wir haben festgestellt, dass Entwickler in den meisten Szenarien nur auf den Wert der Formularübermittlung achten. Daher stellen wir onFinish , die erst ausgelöst werden, nachdem das Formular validiert wurde, und validateFields nicht mehr benötigt wird.

Darüber hinaus bietet Form die Hooks-Methode Form.useForm , mit der Sie das Formularbeispiel steuern können:

const [form] = Form.useForm();

React.useEffect(() => {
    form.setFieldValues({ ... });
});

<Form form={form} />

Gleichzeitig stellen wir die Form.List-Komponente zur Verfügung, damit Sie die Listenfelder einfach steuern können:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

Tabelle wiederholen

Als wir die Mindestanforderungen für die Kompatibilität erhöht haben, haben wir den Stil sticky , um feste Spalten zu implementieren, wodurch der Leistungsverbrauch erheblich reduziert wurde, wenn das Formular feste Spalten enthält. Für IE 11, der sticky nicht unterstützt, werden wir ein Downgrade durchführen.

Gleichzeitig stellen wir eine neue summary API zur Verfügung, um den Effekt der Zusammenfassungszeile zu erzielen:

Für den Sortierer wird die Funktion der mehrspaltigen Sortierung bereitgestellt:

Zusätzlich haben wir die zugrunde liegende Logik angepasst und jetzt können fixedColumn , expandable , scroll gemischt werden. Die body API wird für die Implementierung von benutzerdefiniertem Tabelleninhalt bereitgestellt, und Sie können Effekte wie virtuelles Scrollen erzielen.

Neuer DatePicker, TimePicker und Kalender

Wir schreiben die Datumskomponente als Ganzes neu und entkoppeln sie von moment . Sie können die Auswahlkomponente der benutzerdefinierten Datumsbibliothek mit der generate uns bereitgestellten Methode moment als Datumsbibliothek. Eine benutzerdefinierte Datumsbibliothek finden Sie hier .

Darüber hinaus bieten wir einen vollständigen Satz von Zeit-, Datums-, Wochen-, Monats- und Jahreswählern sowie die entsprechenden Bereichswähler. Sie können es über die Eigenschaft picker festlegen. Sie müssen nicht mehr die kontrollierte Methode von mode , um einen speziellen Selektor zu implementieren:

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

Bei der Bereichsauswahl haben wir auch die Interaktion optimiert. Sie können jetzt die Start- oder Endzeit individuell auswählen und die manuelle Eingabe des Datums ist perfekt optimiert.

Notification / Modal bietet Hooks

In der letzten Version ist möglicherweise das Problem aufgetreten, dass die Modal.xxx und Notification.xxx den Kontext nicht abrufen können. Dies liegt daran, dass wir zusätzlich eine React-Instanz über ReactDOM.render für diese syntaktischen Zucker erstellen, was auch zum Problem des Kontextverlusts führt. In der neuen Version stellen wir die Hooks-Methode bereit, damit Sie Knoten an der Stelle einfügen können, an der Sie den Kontext abrufen müssen:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Virtuelle Schriftrolle

In Version 4 haben wir Tree, TreeSelect und Select geändert, die mithilfe der virtuellen Bildlauftechnologie standardmäßig die Leistung optimieren, um große Datenmengen für das Rendern von Optionen zu übertragen.

Lebende Demo

Darüber hinaus wurden die Tastaturinteraktion und die Zugänglichkeit optimiert.

Weitere neue Funktionen / Features / Optimierungsteile

• ConfigProvider bietet eine direction -Konfiguration zur Unterstützung der rtl Sprachinternationalisierung.
• Form und ConfigProvider unterstützen die Einstellung size , um die Komponentengröße einzuschließen.
• Typografie fügt suffix Attribute hinzu.
• Fortschritt fügt steps untergeordnete Komponenten hinzu.
• TextArea unterstützt onResize .
• Grid verwendet das Layout flex .
• ...

Sie können hier klicken

So aktualisieren Sie

Um das Upgrade so weit wie möglich zu vereinfachen, haben wir maximale Kompatibilität beibehalten. Es gibt jedoch noch einige wichtige Änderungen, die beachtet werden müssen. Sie können zunächst versuchen, mit dem von uns bereitgestellten Codemod-Tool zu migrieren, und einige Inhalte, die nicht migriert werden können, manuell migrieren. Informationen zum Upgrade finden Sie in

obenstehendes

Die Geburt von Ant Design 4.0 ist untrennbar mit dem Beitrag und der Unterstützung von Freiwilligen in der Gemeinde verbunden. Vielen Dank an @saeedrahimi für die Realisierung der Internationalisierungsfunktion von rtl , @shaodahongs Beitrag zum Kompatibilitätspaket und an alle, die an der Entwicklung teilgenommen haben. Es ist Ihr Beitrag zu Open Source, der Ant Design noch besser macht!