当使用 array.map 更改属性时，react 重绘仅更新数组对象

Question

我本以为这个问题是个骗子，但我搜索了一下却找不到...... 这个问题的完整源代码在这里：https://github.com/micahg/arraytest。

使用 React，我将对象数组（使用

useState

存储）映射到组件以进行显示。我只想对数组中具有更改属性的渲染对象做出反应 - 但我尝试过的任何操作要么渲染每个成员，要么不渲染。 （简化的）组件：

const ContainerComponent = () => {

   const [things, setThings] = useState<Thing[]>([]);

   const change = () => {
      const newThing: Thing = {...things[0], name: "Third"};
      things.splice(0, 1);
      const newThings = [...things, newThing];
      setThings(newThings);
   }

   useEffect(() => {
      const initialThings: Thing[] = [ { id: 1, name: "First" }, { id: 2, name: "Second"} ];
      setThings(initialThings);
   }, []);

   return (
      <div>
         <div>Container</div>
         <div>
            {things.map(thing => <ContentComponent key={thing.id} thing={thing}/>)}
         </div>
         <button onClick={change}>Change</button>
      </div>
   );
}

我正在寻找更新数组的方法，以便反应知道不重绘第二个元素。我在 react 开发者工具火焰图中注意到的是，第一个

ContentComponent

重新渲染是因为“道具已更改”（有意义），但第二个重新渲染是因为“父组件重新渲染”。

到目前为止，我能做的最好的就是在

export default memo(ContentComponent);

中使用

ChildComponent

来避免执行第二个

ChildComponent

代码...但是有没有办法对完全重绘第二个子项做出反应？

提前致谢，

Answer 1

正如@regdos正确指出的那样，进行复制而不是更新——这与

memo

相结合实际上最终保存了第二个

ContentComponent

的渲染。