状态数组：状态更新通过钩子重新渲染功能组件中的所有子级

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} />
    ))}

我遇到了性能问题，因为整个单词列表在状态变化时都会重新呈现（每次击键都会发生），即使一次仅是一个元素，而索引（我用作键）却没有。改变。 如果更新由数组组成的状态，这是默认行为吗？如果是这样，您将如何实现状态数组（每个词是其自身的状态），因此您一次只能更新一个状态，因此只能重新释放与该状态相关的单个子对象（否则我会丢失/误解某些东西） ）？