Ich habe neulich einige Ideen aufgeschrieben, nachdem ich ein paar verschiedene Komponentenbibliotheken ausprobiert hatte
Mainstream und Nische
Mainstream-UI-Komponentenbibliothek mit vielen Benutzern und stabiler Wartung und Entwicklung. Wie Bootstrap, Element, Antd. Normalerweise können Sie während des normalen Lernprozesses erkennen, dass sie existieren. Es ist nicht so, dass es keine anderen Komponentenbibliotheken gibt, aber lernen wir zunächst eine der am häufigsten verwendeten kennen.
In Zukunft werde ich die UI-Komponentenbibliothek als Komponentenbibliothek bezeichnen.
Seien Sie in der Lage, die tägliche Entwicklung zu bewältigen, bevor Sie andere Personalisierungen in Betracht ziehen.
Darüber hinaus beeinflussen Mainstream-Komponentenbibliotheken in der Regel nachfolgende Komponentenbibliotheken und werden zu einer beliebten Vorlage mit ähnlichen APIs.
Mit anderen Worten: Dies ist fast zu einer universellen Vorlage für UI-Komponentenbibliotheken geworden
Persönliche Komponentenbibliothek, Naive UIz.B. Vue3Als ich eine geeignete Komponentenbibliothek studierte und auswählte, erhielt ich eine Empfehlung (insbesondere eine große). Der Effekt war in der Tat außergewöhnlich. Die offizielle Dokumentation war auch wie eine Scherzseite, die sehr „unanständig“ war . Aber diese Art von „unregelmäßigen“ offiziellen Dokumenten ist beliebter und auch ein Zeichen freien Denkens.
Es ist jedoch schwierig, von Anfang an auf diese Art von Komponentenbibliothek aufmerksam zu machen. Auch wenn die Komponentenbibliothek erstellt wurde und alle Entwicklungen bewältigen kann, wissen viele Menschen nicht, dass sie existiert, wenn sie nicht von einem Experten empfohlen wird.
Es gibt keinen Favoriten, ich habe nur niemanden getroffen, der besser ist
Im Gegensatz dazu werden Produkte, die in großen Fabriken entwickelt werden, wie sie kürzlich auf den Markt kamen Semi Design, in der Community eine viel höhere Bekanntheit genießen.
Flexibilität und Kapselung
Eines Tages wollte ich die Welt außerhalb von Antd sehen, also sah ich Material-UI
Später als MUI bezeichnet
Allerdings bescherte mir diese Zeit eine sehr schreckliche Erfahrung und ich fühlte mich schrecklich. Es gibt so viele Dinge, die scheinbar in greifbarer Nähe liegen, aber in MUI nicht existieren.
Es ist beispielsweise <Form/>schwer vorstellbar, dass es in einer Komponentenbibliothek keine gibt. Nachdem ich mehr darüber erfahren hatte, stellte ich fest, dass die Verifizierung eine Handschrift erforderte. Eine solche Erfahrung außerhalb der Grenzen veranlasste mich, mich in die Arme von Antd zurückzuziehen. Damals war ich sehr verwirrt: Warum verwenden so viele Menschen solche Komponenten?
Beim Vergleich der beiden Dropdown-Box-Komponenten habe ich sie bereinigt und zeige nur die grundlegende Verwendung.
// MUI
import React from "react"
import Select from "@mui/material/Select"
import MenuItem from "@mui/material/MenuItem"
export default function BasicSelect() {
return (
<Select fullWidth defaultValue="Ten">
<MenuItem value="Ten">
Ten
</MenuItem>
<MenuItem value="Twenty">
Twenty
</MenuItem>
<MenuItem value="Thirty" disabled>
Thirty
</MenuItem>
</Select>
)
}
// antd
import React from "react"
import { Select } from "antd"
const { Option } = Select
export default function BasicSelect() {
return (
<Select defaultValue="lucy">
<Option value="jack">
Jack
</Option>
<Option value="lucy">
Lucy
</Option>
<Option value="disabled" disabled>
Disabled
</Option>
</Select>
)
);
Derzeit gibt es keinen großen Unterschied. Es scheint einen weiteren Parameter zu geben.options
// 必要字段
export interface Option {
label: string
value: string
}
Kann durch Übergabe von Parametern dynamisch gerendert werden
import React from "react"
import { Select } from "antd"
const { Option } = Select
export default function BasicSelect() {
return (
<Select
defaultValue="lucy"
options={[
{
title: "Jack",
value: "jack"
},
{
title: "Lucy",
value: "lucy"
},
{
title: "Disabled",
value: "disabled",
disabled: true
}
]}
/>
)
)
Es ist klar, dass dies nur die Komponente ist, die beim map()Rendern mit hilft. (⊙﹏⊙)MUI bietet diese Option also nicht
Ist MUI wirklich schwierig zu verwenden? Relativ gesehen ist es zu schwierig. Viele Dinge, die sich sehr verbreitet anfühlen, existieren nicht und müssen manuell zusammengebaut werden. Dies ist jedoch auch das Merkmal von MUI, eine transzendente Flexibilität darin
Wenn ich MUI aus der Perspektive eines Lernenden ausprobiere, kann ich verstehen, wie einige häufig verwendete Komponenten gekapselt sind. Die Verwendung von Widgets zur Kapselung komplexer <Table/>und <From/>eigenständiger Aufgaben verbessert das persönliche Komponentendenken erheblich.
Natürlich gibt es noch einen weiteren Punkt, der nicht erwähnt wurde. Warum müssen wir die Komponentenbibliothek ändern? Reicht es nicht, etwas auszuwählen, das zu Ihnen passt und Ihnen vertraut ist?
Meine eigenen Antworten wären diese
- Ich bin der Ästhetik überdrüssig und möchte meinen Stil ändern.
- Probieren Sie neue Dinge aus, es kann sein, dass Sie unerwartete Gewinne und Überraschungen erleben
- Zu viele Leute verwenden es, und ich möchte ein wenig hervorstechen, zumindest damit die Leute nicht allein durch den Blick auf die Benutzeroberfläche wissen, welche Komponentenbibliothek verwendet wird.
Abschluss
Es scheint, dass ich oben viele schlechte Dinge über MUI gesagt habe, aber es funktioniert nicht, egal wie man es betrachtet, denn die übliche Positionierung von Komponentenbibliotheken besteht darin, nach Effizienz und Schönheit zu streben.
Beides sind hervorragende Produkte mit einer ausreichenden Vielfalt, sodass Sie keine Wahl haben werden.
Es existiert nicht. Wählen Sie einfach eine davon aus, die Sie verwenden möchten, einfach wie Vueund React. Können Sie sagen, dass Sie nur das Gleiche lernen? Sie müssen mit ihnen in Kontakt treten. Vielleicht ist der andere Ihr kleiner Liebhaber . Persönliche Voreingenommenheit ist unvermeidlich, aber loben Sie andere nicht und kritisieren Sie sie nicht.