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

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道具已更改的组件。

标签： javascriptreactjsrendering