防止在反应中重新渲染数组内的某些组件

Question

假设我有一个组件 Parent 并且我正在渲染这样的子组件。

const [items,setItems] = useState([1,2,3,4,5,6....]);
const [pointer,setPointer] = useState(0);
// inside return
{items.map((item,idx)=>{
    return <ChildCanvas text={item} isPointer={pointer===idx} key={idx} idx={idx}/>
})}

pointer 和 items 都是同一组件中的不同状态。每当 pointer 发生变化时，我都会在那个孩子身上做一些动画(pointer===idx)。

一次，isPointer 仅对一个 ChildCanvas 组件为真。在这里，我期望，react 将重新渲染其 isPointer 道具已更改的孩子。

但是，每当 isPointer 发生变化时，React 都会重新渲染所有 ChildCanvas 组件。 ChildCanvas 是一个沉重的组件，因此这使页面 (unresponsive for some time)。

<块引用>

我如何检查特定的 ChildCanvas 是否已重新渲染。

function ChildCanvas({text,isPointer,idx}){
    console.log(`child ${idx} has been rerendered`);
    return // code...
}

现在，每当 pointer 发生变化时，我就会得到这个

child 0 has been rerendered
child 1 has been rerendered
child 1 has been rerendered
// up to the length of the array

如何确保仅重新渲染其 isPointer 属性已更改的组件。