Мне показалось, что я достаточно хорошо понимаю алгоритм согласования React, но я теоретически не могу сделать простую вещь.
У меня есть компонент для редактирования списка пользователей (Users) в форме JavaScriptмассив не хранится ни в одной БД, поэтому идентификаторов нет.Компонент Users получает реквизит users и отображает каждую отдельную встроенную форму для редактирования пользователем с помощью функции users.map.Каждый компонент User отображает два поля firstName и lastName, которые мы можем редактировать.Всякий раз, когда мы редактируем имя или фамилию, изменение распространяется через обработчик событий onChange, назначенный компоненту Users и User.На верхнем уровне все хранится в состоянии.
Вот воспроизведение, выполненное с использованием крючков и компонентов класса .
Есть несколько проблем:
Когда я удаляю элемент с индексом 0, он удаляет его из состояния, но алгоритм согласования не сможет правильно отобразить список пользователей и удалит последний элемент из DOM.Решением может быть назначение некоторых временных идентификаторов каждому пользователю, чтобы он знал, как отобразить список элементов.Я пытался, и это работает, но тогда, когда я изменяю какие-либо детали пользователя, я теряю фокус на входе ...
Как видите, я использую React.memo, чтобы невизуализировать элементы, реквизиты которых не изменились.Однако я не могу этого сделать, так как у меня есть некоторые обработчики событий, которые всегда меняются, и даже использование React.useCallback не помогает, потому что это зависит от реквизита.Я не знаю, как сделать этот список эффективно.Возможно нет никакого способа сделать это.Я не мог сделать это ни с помощью хуков, ни с компонентами класса.
Я что-то здесь упускаю?