¡Ant Design 4.0 ya está disponible!

Introducción

Lanzamos la versión 4.0 rc en SEE Conf. Después de más de un mes de recopilación de comentarios y ajustes, ¡es hora de lanzar 4.0! Gracias a todos los que brindaron comentarios, sugerencias y contribuciones durante este período. Combinaremos las actualizaciones ya involucradas en la versión rc y algunas actualizaciones recientemente aquí. La documentación actualizada completa se puede encontrar aquí . Dirección del documento v4: https://ant.design

Cabe señalar que la versión v3 se fusionó con la rama 3.x-stable en diciembre de 2019 y entró en mantenimiento. Seguiremos realizando trabajos de mantenimiento de medio año para la versión v3. La fecha límite de mantenimiento es mayo de 2020.

Actualización de la especificación de diseño

Hemos ajustado las esquinas redondeadas base de 4px a 2px . El filete en sí es un detalle, y en las escenas intermedias y de fondo, tomamos la eficiencia como la primera prioridad, por lo que reducimos los detalles visuales de la interfaz y mejoramos la eficiencia de la lectura de información de la interfaz. Además, hemos ajustado las sombras para hacerlas más consistentes con las sombras reales, al tiempo que enfatizamos la jerarquía de información.

Tema oscuro

Hemos actualizado el sistema de color basado en la versión v3 y la v4 proporciona un tema oscuro. Puede hacer clic en la función de cambio de tema en la página para ver el efecto del tema oscuro:

Componente sin bordes

En el trabajo diario, encontramos que existen componentes de selección ligeros en algunos escenarios. Por eso, proporcionamos un nuevo estilo sin bordes que permite a los desarrolladores incrustar estos componentes más fácilmente sin anular el estilo.

Ajuste de compatibilidad

Ant Design 3.0 ha realizado muchos esfuerzos para ser compatible con versiones anteriores de IE. Sin embargo, según las estadísticas de la industria, los navegadores IE9 / 10 tanto globales como nacionales se están reduciendo con las actualizaciones del sistema de Windows. Dejamos de admitir IE 9/10 en 4.0 (pero seguiremos admitiendo IE 11). Por lo tanto, algunos componentes de bajo rendimiento del pasado también mejorarán su rendimiento con las nuevas funciones de CSS.

Al mismo tiempo, también actualizamos la versión mínima de React de la que depende v4 a React 16.9. Esto significa que la versión v4 proporcionará más ganchos para simplificar su código.

Además, hemos eliminado algunas API obsoletas que se advirtieron en la versión v3. Recomendamos encarecidamente que actualice su proyecto actual a la última versión de v3 y actualice la API obsoleta según el mensaje de advertencia.

Menor tamaño

En antd @ 3.9.0 , presentamos el ícono svg ( ¿Por qué usar el ícono svg? ). La API de iconos que usa el nombre de la cadena no se puede cargar a pedido, por lo que el archivo de icono svg se introduce por completo, lo que aumenta en gran medida el tamaño del producto empaquetado. En 4.0, ajustamos la API de uso de iconos para admitir la agitación de árboles, reduciendo el tamaño del paquete predeterminado de Antant en aproximadamente 150 KB (comprimido en Gzip).

Se descartará el uso de iconos heredados:

import { Icon, Button } from 'antd';

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

En 4.0, se introducirá bajo demanda:

  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';

Además, también hemos eliminado algunas dependencias relacionadas para reducir el tamaño del paquete comprimido con gzip:

Reescritura de componentes

Formulario de reescritura

El formulario, como componente de alta frecuencia, tiene una API ligeramente redundante. El usuario debe obtener la instancia del formulario a través del HOC de Form.create y usar form.getFieldDecorator para realizar el enlace de datos en el componente. Además, todo el formulario se vuelve a representar cada vez que cambian los datos, lo que hace que el rendimiento sea preocupante en los formularios de big data. En la versión v4, Form vendrá con una instancia de formulario. Puede vincular datos directamente a través de la propiedad name de Form.Item, simplificando así su código:

- 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>

Descubrimos que, en la mayoría de los escenarios, el desarrollador solo se preocupa por los valores que el formulario envía correctamente. Por lo tanto, proporcionamos onFinish , que solo se activará después de que pase la validación del formulario, y validateFields ya no son necesarios.

Además, Form proporciona el método hooks Form.useForm para permitirle controlar el ejemplo del formulario:

const [form] = Form.useForm();

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

<Form form={form} />

Al mismo tiempo, proporcionamos el componente Form.List, para que pueda controlar fácilmente los campos de la lista:

<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>

Reescritura de tabla

Debido a que hemos ajustado los requisitos mínimos de compatibilidad, hemos cambiado a la implementación de columnas fijas usando el estilo sticky , reduciendo así en gran medida el consumo de rendimiento cuando el formulario tiene columnas fijas. Para IE 11 que no admite sticky , tomamos el proceso de degradación.

Al mismo tiempo, proporcionamos una nueva API summary para lograr el efecto de la línea de resumen:

El clasificador proporciona una función de clasificación de varias columnas:

Además, ajustamos la lógica subyacente para que fixedColumn , expandable y scroll ahora puedan combinarse. Proporciona una API body para personalizar implementaciones de contenido de tablas, desde la cual puede implementar efectos como el desplazamiento virtual.

Nuevo DatePicker, TimePicker y Calendario

Hemos reescrito el componente de fecha como un todo para desacoplarlo de moment . Puede generar componentes de selector para bibliotecas de fechas personalizadas utilizando el método generate que proporcionamos. Para mantener la compatibilidad, el componente Selector predeterminado todavía usa moment como biblioteca de fechas. Consulte aquí la biblioteca de fechas personalizada.

Además, proporcionamos un conjunto completo de selectores de hora, fecha, semana, mes, año y los selectores de rango correspondientes. Puede configurarlo a través de la propiedad del selector, en lugar de implementar el selector especial a través del método controlado de modo:

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

Para el selector de rango, también hemos optimizado la interacción. Ahora puede seleccionar la hora de inicio o finalización individualmente y optimiza perfectamente la experiencia de entrada de fecha manual.

Ganchos de notificación / soporte modal

En el pasado, es posible que haya encontrado el problema de que los métodos de llamada Modal.xxx y Notification.xxx no pueden obtener el contexto. Esto se debe a que crearemos adicionalmente una instancia de React a través de ReactDOM.render para estos azúcares sintácticos, lo que también causa el problema de la pérdida de contexto. En la nueva versión, proporcionamos el método hooks, que le permite inyectar nodos donde necesita obtener el contexto:

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>
);

Desplazamiento virtual

En v4, hemos actualizado Tree, TreeSelect y Select. De forma predeterminada, utilizan tecnología de desplazamiento virtual para optimizar su rendimiento y llevar una gran cantidad de renderizado de opciones.

Demostración viviente

Además, se optimizan la interacción y la accesibilidad del teclado.

Más funciones / funciones / optimizaciones nuevas

• ConfigProvider proporciona la configuración direction para admitir la internacionalización del idioma rtl .
• Form y ConfigProvider admiten la configuración size , incluido el tamaño del componente.
• La tipografía agrega el atributo suffix .
• Progress agrega el subcomponente steps .
• TextArea admite onResize .
• Grid usa el diseño flex .
• ......

Puede hacer clic aquí para ver el registro de actualización completo.

Cómo actualizar

Para que la actualización sea lo más sencilla posible, mantenemos la máxima compatibilidad. Pero todavía hay algunos cambios importantes que requieren atención. Primero puede intentar migrar usando la herramienta codemod proporcionada por nosotros y migrar manualmente algunas partes que no se pueden migrar. Consulte el documento para actualizar.

Sobre todo

El nacimiento de Ant Design 4.0 es inseparable de las contribuciones y el apoyo de los voluntarios de la comunidad. Gracias a @saeedrahimi por la internacionalización de rtl , las contribuciones de

¡La versión oficial de Ant Design 4.0 ya está aquí!

Introducción

Lanzamos la versión 4.0 rc con motivo de SEE Conf. Después de más de un mes de recopilación de comentarios y ajustes, ¡finalmente ingresamos a la versión oficial 4.0! Gracias a todos los que brindaron comentarios, sugerencias y contribuciones durante este período. Aquí enumeraremos las actualizaciones que ya están involucradas en la versión rc y algunas de las nuevas adiciones más importantes. El documento actualizado completo se puede hacer clic aquí . Dirección del documento v4: https://ant.design

Cabe señalar que la versión v3 se fusionó con la rama 3.x-stable en diciembre de 2019 y entró en estado de mantenimiento. Seguiremos manteniendo la versión v3 durante medio año. La fecha límite de mantenimiento es mayo de 2020.

Actualización de la especificación de diseño

Ajustamos el filete básico de 4px a 2px . Los productos intermedios y secundarios tienen la eficiencia como la primera prioridad, y el estilo de las esquinas redondeadas es un detalle importante en la interfaz de usuario. Las esquinas redondeadas más pequeñas reducen visualmente los detalles de la interfaz y mejoran la eficiencia de la lectura de información. Además, ajustamos las sombras para hacerlas más acordes con las sombras reales y, al mismo tiempo, reflejar mejor el nivel de información.

Tema oscuro

Hemos actualizado el sistema de color basado en la versión v3 y la v4 proporciona un tema oscuro. Puede hacer clic en la función de cambio de tema en la página para ver el efecto de tema oscuro:

Componentes sin bordes

En los negocios, encontramos que algunos escenarios tendrán componentes de selección ligeros. Por lo tanto, proporcionamos un nuevo estilo sin bordes que permite a los desarrolladores incrustar estos componentes más fácilmente sin tener que sobrescribir el estilo.

Ajuste de compatibilidad

Ant Design 3.0 ha realizado muchos esfuerzos para ser compatible con la versión anterior de IE. Sin embargo, según las estadísticas de la industria, tanto la participación global como nacional del navegador IE9 / 10 se está reduciendo con la actualización del sistema Windows. Estamos en la versión 4.0 y dejamos de admitir IE 9/10 (pero seguiremos admitiendo IE 11). Por lo tanto, algunos componentes de bajo rendimiento en el pasado también obtendrán mejoras de rendimiento con las nuevas características de CSS.

Al mismo tiempo, también actualizamos la versión mínima de React de la que depende v4 a React 16.9. Esto significa que la versión v4 proporcionará más ganchos para simplificar su código.

Además, también hemos eliminado algunas API obsoletas que fueron advertidas en la versión v3. Recomendamos encarecidamente que actualice su proyecto actual a la última versión de v3 y actualice la API obsoleta según la información de advertencia.

Menor tamaño

En [email protected] , presentamos el ícono svg ( ¿por qué usar el ícono svg? ). La API de iconos que utiliza nombres de cadenas no se puede cargar a pedido, por lo que el archivo de icono svg se introduce por completo, lo que aumenta enormemente el tamaño del producto empaquetado. En 4.0, ajustamos la API de uso de iconos para admitir la agitación de árboles y reducir el tamaño del paquete predeterminado de antd en aproximadamente 150 KB (comprimido en Gzip).

La versión anterior del uso de iconos quedará obsoleta:

import { Icon, Button } from 'antd';

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

En 4.0, se adoptará un método de introducción bajo demanda:

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';

Además, también hemos optimizado las dependencias relacionadas para reducir el tamaño del paquete (comprimido en Gzip):

Rehacer componente

Rehacer formulario

El formulario es un componente de uso frecuente y su API es ligeramente redundante. El usuario debe obtener la instancia del formulario a través del método HOC de Form.create , y usar form.getFieldDecorator para vincular datos al componente. Además, todo el formulario se volverá a renderizar cada vez que cambien los datos, lo que hace que el rendimiento sea preocupante en el formulario de big data. En la versión v4, Form tendrá su propia instancia de formulario, y puede realizar el enlace de datos directamente a través de la propiedad name de Form.Item para simplificar su código:

- 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>

Descubrimos que en la mayoría de los escenarios, los desarrolladores solo prestan atención al valor del envío del formulario. Por lo tanto, proporcionamos onFinish , que solo se activará después de que se valide el formulario, y validateFields ya no es necesario.

Además, Form proporciona el método hooks Form.useForm que le permite controlar el ejemplo del formulario:

const [form] = Form.useForm();

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

<Form form={form} />

Al mismo tiempo, proporcionamos el componente Form.List, para que pueda controlar fácilmente los campos de la lista:

<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>

Rehacer tabla

A medida que aumentamos los requisitos mínimos de compatibilidad, cambiamos para usar el estilo sticky para implementar columnas fijas, lo que reduce en gran medida el consumo de rendimiento cuando el formulario tiene columnas fijas. Para IE 11 que no es compatible con sticky , lo degradaremos.

Al mismo tiempo, proporcionamos una nueva API summary para lograr el efecto de la línea de resumen:

El clasificador proporciona la función de clasificación de varias columnas:

Además, ajustamos la lógica subyacente, y ahora fixedColumn , expandable , scroll se pueden mezclar. La API body se proporciona para la realización de contenido de tabla personalizado, para que pueda lograr efectos como el desplazamiento virtual.

Nuevo DatePicker, TimePicker y Calendario

Hemos reescrito el componente de fecha como un todo, por lo que lo desacoplamos de moment . Puede generar el componente Selector de la biblioteca de fechas personalizada a través del método generate que proporcionamos. Para mantener la compatibilidad, el componente Picker predeterminado todavía usa moment como biblioteca de fechas. Consulte aquí la biblioteca de fechas personalizada.

Además, proporcionamos un conjunto completo de selectores de hora, fecha, semana, mes, año y los selectores de rango correspondientes. Puede configurarlo a través de la propiedad picker , ya no es necesario utilizar el método controlado de mode para implementar un selector especial:

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

En el selector de rango, también optimizamos la interacción. Ahora puede seleccionar la hora de inicio o finalización individualmente, y la experiencia de ingresar manualmente la fecha está perfectamente optimizada.

Notificación / Modal proporciona ganchos

En la versión anterior, puede encontrar el problema de que los métodos de llamada Modal.xxx y Notification.xxx no pueden obtener el contexto. Esto se debe a que crearemos adicionalmente una instancia de React a través de ReactDOM.render para estos azúcares sintácticos, lo que también conduce al problema de la pérdida de contexto. En la nueva versión, proporcionamos el método hooks para que pueda inyectar nodos en el lugar donde necesita obtener el contexto:

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>
);

Desplazamiento virtual

En la versión 4, hemos modificado Tree, TreeSelect y Select, que utilizan tecnología de desplazamiento virtual para optimizar el rendimiento de forma predeterminada para llevar la representación de opciones de gran volumen de datos.

Demostración viviente

Además, también se han optimizado la interacción y la accesibilidad del teclado.

Más funciones / características / piezas de optimización nuevas

• ConfigProvider proporciona la configuración direction para admitir la internacionalización del idioma rtl .
• Form y ConfigProvider admiten size establecer el tamaño del componente incluido.
• La tipografía agrega atributos suffix .
• Progress agrega steps componentes secundarios.
• TextArea admite onResize .
• Grid usa el diseño flex .
• ...

Puede hacer clic aquí para ver el registro de actualización completo.

Cómo actualizar

Para simplificar la actualización tanto como sea posible, hemos mantenido la máxima compatibilidad. Pero todavía hay algunos cambios importantes que necesitan atención. Primero puede intentar migrar usando la herramienta codemod que proporcionamos y migrar manualmente parte del contenido que no se puede migrar. Consulte este documento para actualizar.

lo anterior

El nacimiento de Ant Design 4.0 es inseparable de la contribución y el apoyo de los voluntarios de la comunidad. Gracias @saeedrahimi por realizar la función de internacionalización de rtl , la contribución de @shaodahong al paquete de compatibilidad y a todos los que participaron en el desarrollo. ¡Es su contribución al código abierto lo que hace que Ant Design sea aún mejor!