Массив как состояние: обновление состояния повторно отображает все дочерние элементы в функциональном компоненте с помощью ловушек - PullRequest
Новая
       16

Массив как состояние: обновление состояния повторно отображает все дочерние элементы в функциональном компоненте с помощью ловушек

0 голосов
/ 21 октября 2019

Я рендерил огромный список слов, используя функцию array.map. В зависимости от пользовательского ввода я изменяю отдельные элементы массива (только по одному за раз). 

const [words, setWords] = useState();

let wordList = [];
wordList.push({ t: 'word1', a: 1, s: 0 });
wordList.push({ t: 'word2', a: 0, s: 0 });
wordList.push({ t: 'word3', a: 0, s: 0 });
wordList.push({ t: 'word4', a: 0, s: 0 });
wordList.push({ t: 'word5', a: 0, s: 0 });
...etc.
setWords(wordList);

в возвращаемой части: 

...
    words.map((word, index) => (
      <Word key={index} word={word} index={index} />
    ))}

Я сталкиваюсь с проблемами производительности в целомсписок слов перерисовывается при изменении состояния (которое происходит при каждом нажатии клавиши), даже если это только один элемент за раз, и индекс (который я использую в качестве ключа) не изменяется. Это поведение по умолчанию, если вы обновляете состояние, состоящее из массива? Если да, то как бы вы реализовали массив состояний (каждое слово является его собственным состоянием), поэтому вы обновляете только одно состояние за раз, и, следовательно, переопределяете только отдельный дочерний элемент, связанный с этим состоянием (или я что-то упускаю / неправильно понимаю? )

...