arrays - 数组作为状态：状态更新使用钩子重新渲染功能组件中的所有子项

Question

我正在使用 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} />
    ))}

我遇到了性能问题，因为整个单词列表在状态变化时重新呈现（每次击键都会发生），即使它一次只有一个元素并且索引（我用作键）没有改变。如果您更新由数组组成的状态，这是默认行为吗？如果是这样，你将如何实现一个状态数组（每个单词都是它自己的状态），所以你一次只更新一个状态，因此只重新渲染连接到状态的单个孩子（或者我错过/误解了什么)?

标签： arraysreactjsdictionaryreact-hooksreact-functional-component