В промежуточной и фоновой системе управления,Несколько вкладокПотребности приложения очень общие. Пользователям часто приходится переключаться между несколькими вкладками. Например, при заполнении формы они переходят к определенному списку, чтобы получить некоторую информацию о поле, а затем возвращаются на страницу формы, чтобы заполнить . Такие требования используются в Vue
keep-aliveЕго можно реализовать, но в React React Router будет выгружать компоненты после переключения маршрутов, а подобного он не предоставляетkeep-aliveФункция, поэтому функция реализации нескольких знаков страницы станет более конкретной. Мой проект также столкнулся с той же проблемой, и я провел техническое исследование и выбор примерно в 2019 году и, наконец, выбрал.react-router-cache-route, и на основании этого реализовано требование наличия нескольких вкладок, и он стабильно работает уже 2 года. Позвольте мне рассмотреть это преобразование с несколькими вкладками.
1. Введение в проект
Этот проект является проектом моего текущего отдела, этоСистема управления промежуточным звеном и бэкстейджем уровня предприятия, в том числе системное управление, ролевая система разрешений, основанная наActivitiМеханизм рабочего процесса и множество других готовых функций. Проект включает в себя интерфейс и серверную часть, а серверная часть представляет собой среду Java корпоративного уровня на основе Spring, разработанную нашим отделом.Внешний интерфейс — это стек технологий React, который в то время был еще версии 15. React Router все еще v2.
Основная цель проекта - предоставить проектной группе средние, фоновые и технологические требования научно-технического отдела.На основе базового проекта, предоставленного нашим проектом, проект может быть быстро построен, а затем разработан в соответствии с потребности. По состоянию на октябрь 2019 года, когда я покинул команду проекта, этот проект обслуживал почти 50 систем в отрасли.
2. Предыстория спроса
В то времяНесколько вкладокПотребности все еще относительно ясны, потому что наша команда использовала в 2013 г.Sea.js+ Система пост-менеджмента JQuery уже реализована, но новый UI, построенный с использованием стека технологий React, лишился этой функции, которая подвергалась критике со стороны пользователей, а спрос на несколько вкладок очень велик. в то время как Vue используетkeep-aliveФункцию нескольких вкладок можно реализовать, как показано на следующем рисунке.vue-element-adminЭто типичный случай с несколькими вкладками.
Сам мультитаб React легко реализовать, но сложность в том, что нет официального Vue-подобногоkeep-aliveОднако в React Router коммутатор маршрутизации напрямую выгружает компонент, делая невозможным кэширование, а данные и поведение пользователя будут потеряны.
Спрос на несколько вкладок в сообществе также очень высок, но такие, как известные промежуточные и фоновые решения в сообществе ReactAnt Design ProНе поддерживает и эту функцию, два года не смотрел, а их еще многоIssueСделайте такой запрос:
ВерноБольшой парень ответил на это еще в 2017 году, подробности см.Можете ли вы предоставить режим переключения вкладок · Issue #220 · ant-design/ant-design-pro · GitHub, этот Isuue хоть и закрыт, но активен все эти годы:
Глядя на количество 👎, вы можете видеть, что пользователи на самом деле не покупаются на этот ответ. Давайте посмотрим на объяснение этой проблемы с правой стороны в 2019 году, которое немного более конкретно:
Я не совсем согласен с этим объяснением.. Во-первых, это неправда, что «режим вкладок не может (непригоден) для обмена URL-адресами», URL-адрес с маршрутизацией и параметрами может точно перейти на соответствующую страницу, что является базовой функцией в нашей системе и системе с несколькими вкладками Vue; И говоря, что у самого браузера есть вкладки, не обязательно быть внутри веб-сайта, и это более односторонне.Страница SPA не открывает вкладку браузера, что должно больше соответствовать значениям дизайна Antd:Оставайтесь дома - Муравей Дизайн, даже последняя версия Chrome уже поддерживает функцию "группы". Это должно быть лучше, чтобы пользователи старались не открывать вкладку браузера на странице SPA.
Ознакомьтесь с рациональным анализом остальной части сообщества:
3. Выбор схемы
После некоторых исследований можно выделить примерно три основные идеи:
- Использование Редукса, данные отправляются в хранилище для реализации «кеша» данных страницы.
- Переписать исходный код React Router, маршрут переключения не удаляется, а скрывается.
- Используйте колеса сообщества, я выбрал на тот момент в GitHub два продукта:React Keeperа такжеreact-router-cache-route
На самом деле у каждой схемы есть свои проблемы, и окончательный выбор — использовать метод исключения. Недостатком первого решения является то, что из-заЕсть много товаров на складе, а в самом проекте много кода,Модернизация более инвазивна, не лучший выбор. Второй способ мышления иreact-router-cache-routeскорее,Я не хочу изобретать велосипед. Третий вариант решения с открытым исходным кодом в то время был на самом деле не таким уж большим выбором, хотя оба проекта сейчас имеют более 700 звезд.В то время количество звезд составляло всего несколько десятков,А Выпусков и Пр очень мало, то есть пользователей и контрибьюторов не так много, поэтому я беспокоюсь, что будут последующие проблемы с обслуживанием и скрытые ямы.
Коллеги наконец выбралиreact-router-cache-route, но когда я пытался интегрировать проект, я просто сообщил об ошибке и дал коллеге пощечину, подробности см.Issue.
Мой коллега нашел меня для устранения проблемы.После позиционирования я обнаружил, что это был один из React 16.Breaking Changeвызванный,Начиная с React 16, компоненты React могут возвращать массивы., а React 15 не работает, подробности см. в этом, который я отправил.PR.
решеноreact-router-cache-routeПосле того, как версия React 15 сообщила об ошибке, следующая работа заключается в реализации пользовательского интерфейса вкладки и логики открытия и закрытия.Обратите внимание, что закрытие должно быть вызваноreact-router-cache-routeAPI разгрузки кеша.
4. Какие проблемы еще существуют
Глубокое использование команды проектаreact-router-cache-routeПрошло два года, и были некоторые проблемы из-за итерации версий React и React Router.К счастью, автор react-router-cache-route постоянно обновлял его и решил многие острые проблемы.
Но в настоящее время все еще есть две проблемы: одна из них заключается в том, что внутренний маршрут вложенного маршрута кэширования не может очистить кеш.Issue #64 :
но проблемаОколо 1 года на решение!
Есть еще одна проблема, на самом деле это не проблема react-router-cache-route. Мы добавили функцию открытия одного и того же компонента несколько раз в итерации нескольких вкладок. Этот сценарий относительно распространен. Например, страница списка щелкает ссылку, чтобы перейти на страницу формы, и несколько форм могут быть открыты одновременно. время, поэтому нет проблем без использования Redux, но если данные существуют в Redux, возникнет проблема с несколькими компонентами, и отображение всегда будет последними данными в хранилище.Чтобы решить эту проблему, необходимо восстановить связанная с Redux логика, которая вызывает проблемы.
5. Есть ли какие-то новые разработки в схеме мультитабов React сейчас?
Давно не обращал на это внимания, за последние два дня просматривал сопутствующие вопросы и обнаружил, что появились новые колеса, я их не проверял, помещаю ниже для ознакомления студентов. Если вы хотите реализовать функцию multi-tab, то рекомендуется использовать react-router-cache-route, ведь мы его стабильно используем уже больше двух лет без особых проблем.
- react-router-cache-route(рекомендовать)
- React Activation(Тот же автор, что и вышеупомянутый инструмент, реализация функции в Vue в React, с предварительной компиляцией babel для достижения более стабильной функции KeepAlive)
- umi-plugin-keep-alive(плагин umi для руля выше)
- react-keeper(774 звезды)
- react-antd-multi-tabs-admin(73 звезды, шаблон управления фоном с несколькими вкладками Antd)
- react-live-route(207 звезд, еще и колесо для кеширования роутинга)
- React Ant(232 звезды, на основе вкладок с несколькими вкладками Ant Design Pro 2.0)
- Ant Design Pro Plus(88 звезд, на основе ant-design-pro с небольшой доработкой)
- React Admin (83 звезды, архитектура системы управления на основе Ant Design React)
- ant_pro_tabs(82 звезды, на основе Ant Design Pro 4 для реализации страниц с несколькими вкладками, включая: маршрутизацию, список, сосуществование страниц с несколькими подробностями, автоматическое добавление, закрытие вкладок и другие функции)
- Antd Pro Page Tabs(54 звезды, мультивкладка Ant Design Pro, на основе UmiJS)
- alita/packages/tabs-layout(плагин кеша для мобильной платформы реагирования на основе umi)
При выборе можно изучить принцип, количество звезд, количество Выпусков, количество PR и т.д. Конечно, можно посмотреть и принцип, который они реализуют, а еще полезно узнать об этой идее .
6. Заключение
Средняя и закулисная системаНесколько вкладокСпроса должно быть много, стек технологий ReactУниверсального решения пока нет, в настоящее время находится в состоянии, когда колеса летят вместе. Я надеюсь, что опыт, описанный в этой статье, поможет всем и позволит избежать обходных путей.
Эта статья участвует в «Весенней рекрутинговой кампании Nuggets 2021», нажмите, чтобы просмотретьсведения о деятельности