инструмент управления пакетамиpnpm
pnpmВстроенная поддержка нескольких пакетов в одном хранилище, создание неплиточного node_modules, поэтому код не может получить доступ ни к одному пакету, доступ ко всем файлам осуществляется на основе программных ссылок, совместим с инструкциями npm, легко начать работу, если вы можете использовать npm, тогда и будем использовать pnpm.
сдаться
В 2021 году рассмотрите возможность отказаnpmа такжеyarn.
инструменты для сборкиVite
Самым популярным инструментом сборки сейчас, конечно же, является vite, который основан на собственных модулях ES, пропускает концепцию упаковки и имеет сверхбыстрый механизм горячего обновления модулей (HMR). снова webP*.
сдаться
webpackОт этого не так просто отказаться, но это можно поставить на повестку дня.
CSS-схемаTailwind CSS
Tailwind CSSЭто одна из технологий, которую фронтенд-инженеры больше всего хотят опробовать за последние два года. Кто знает, используют ли они ее. CSS-схема атомарной концепции, семантический тип с сильной выразительностью, везде отражает элегантность, и FaceBook использует Это.Tailwind CSSПосле рефакторинга было сохранено почти 70% CSS-кода, а мощность была поразительной: моим коллегам больше не нужно было беспокоиться об именах CSS-классов. Примечание: Чем больше предмет, темTailwind CSSЧем больше кода CSS вы сохраните.
сдаться
сдатьсяless,sassТакие инструменты предварительной обработки, инструменты предварительной обработки CSS, выполнили свою историческую миссию и теперь являются тяжелым бременем для производительности.
государственное управление
Рекомендуемая практикаReact Query + useContext,React QueryУправление состоянием интерфейса,useContextЗаниматься местным государственным управлением
React Query
React QueryЭто делает получение состояния, кэширование, синхронизацию и обновление на стороне сервера очень простым в приложениях React и предоставляет готовые функции получения состояния, получения пейджинга, бесконечного сбора и восстановления с прокруткой, что значительно сокращает нашу логику управления состоянием. ReactQuery поддерживает все состояние на стороне нашего сервера в глобальном масштабе и взаимодействует со своей стратегией кэширования для хранения и обновления данных. С помощью этой функции мы можем удалить все данные, которые взаимодействуют с сервером, из инструментов управления состоянием, таких как Redux, и оставить все это для управления ReactQuery.
useContext
Схема управления состоянием, изначально поддерживаемая React Hook.
сдаться
-
ReduxСинтаксисов шаблонов много.Хоть и есть какие-то вспомогательные инструменты, но все же хлопотно, да и поддержка ts не дружит, что делает фронтенд заученной работой, что не элегантно. -
MobXАдаптивный способ работы противоречит концепции одностороннего потока данных React и не рекомендуется.
Библиотека мобильных компонентовzarm
Самое удивительное в экосистеме React то, что различные библиотеки компонентов возникают бесконечным потоком, но библиотек мобильных компонентов очень мало, раньше для всех был только antd-Mobile, сейчас хороший выбор библиотек мобильных компонентов. Чжунган делает это.zarm, Компоненты богаты, использование простое, разработчик быстро реагирует Это многообещающая библиотека компонентов. Сосредоточьтесь на поддержкеviteиспользуется в.
сдаться
Antd-Mobile не обновлялся четыре года, а многие концепции устарели и можно считать заброшенными.
рем схема
Не изменяйте размер корневого шрифта
Не изменяйте размер корневого шрифта
Не изменяйте размер корневого шрифта
Многие люди изменяют размер корневого шрифта при инициализации страницы, а затем используют макет rem для всех, и они думают, что они очень умны Это плохая привычка, которую Али привнес в отечественный интерфейс. плохая производительность продуктов Али на iPad, вы это знаете Какой плохой план.
Что еще более важно, после изменения размера корневого шрифта это очень недружественно для слабовидящих людей.Если пользователь устанавливает шрифт браузера на большой размер, вы можете изменить его обратно, чтобы восстановить черновик дизайна.Это будет красиво смотреться на мобильный телефон, и пользователь его не увидит. , нет технического лица, ответственного за общество.