Ну, это должны быть три отдельные темы, но я просто хочу подытожить то, что я сегодня узнал.
Неглубокое копирование
мелкая копия копирует только один слой исходного массива, то, что я имею в виду под одним слоем, выглядит так:
const oriArr = ["1","2","3"]; const copyArr = oriArr.slice(); //shallow copy whole arr copyArr.push("4"); console.log(oriArr); // "1","2","3" console.log(copyArr); // "1","2","3","4"
Из простого примера можно сделать вывод, что мелкое копирование можно использовать как быстрое копирование массива без изменения исходного значения массива.
Однако, если это многомерные массивы, жизнь будет сложнее:
//I want to push 2 to the 0 element const oriArr = [["1"],["2"],["3"]]; const copyArr = oriArr.slice(); //shallow copy whole arr copyArr[0].push("4"); console.log(oriArr); // ["1","4"],["2"],["3"] console.log(copyArr); // ["1","4"],["2"],["3"]
Array.slice() вообще не работает для многомерных массивов!!!
В React я бы не стал иметь дело с простыми массивами значений. Это массивы объектов (как одномерные, так и многомерные). Я использую множество функций отображения для извлечения значений многомерных массивов и размещения их там, где они должны быть (? может быть, в будущем у меня будет больше способов). На самом деле я не решаю здесь проблему, просто поделюсь некоторыми соображениями: преобразовать многомерные массивы в одномерные массивы, а затем реструктурировать их так, как вам нравится.
Реализация опроса JS
История пользователя 1: Как пользователь, я хочу, чтобы мой список изображений обновлялся, когда отображается всплывающее уведомление о завершении создания изображения.
История пользователя 2: Как пользователь, я хочу видеть историю уведомлений, когда я нажимаю кнопку уведомления, чтобы я мог видеть свои уведомления.
Я уже реализовал часть уведомления, используя опрос JS с помощью метода setInterval.
В файле NotificationToast.tsx я использую функцию loadNotification для извлечения всех уведомлений из базы данных и сохранения их в локальной переменной с именем note. Стоит отметить, что уведомление будет удалено после того, как оно будет отображено во внешнем интерфейсе.
// for storing the notifications locally so that the user can see the notification history let result = new Map<string, any>(); export let note = observable({notifications:result}); // for alert style let style:string = ""; export let styling = observable({addStyle:style}); function NotificationToast(userId:string, images:any) { loadNotification(userId); images.injectImageList(userId); setInterval(() => { loadNotification(userId); images.injectImageList(userId); },10000) } function toastifyNotifications(note:any) { toast.success(note.message, { containerId: "B" }); } function loadNotification(userId:string) { const results = somePromisewithUserId; if(results) { result.then((res:any) => { if(res.data){ for(const note of res.data.group) { toastifyNotification(note); note.notifications.set(note); // store locally for checking history } styling.addStyle="alert"; } }) .catch((error: any) => { console.log(error); }); } } export default NotificationToast;