避免重新渲染同级存储在父级中的状态数组的React组件

如何解决避免重新渲染同级存储在父级中的状态数组的React组件

我正在渲染视频中的一系列帧，每个帧都有自己的组件。这些帧作为状态存储在称为时间轴的父组件中。

由于我需要操纵来自子组件的帧数组元素，因此我传入了带有闭包的索引为i的回调函数。为避免各个帧的变化影响所有帧，我在每个memo周围使用了Frame高阶分量。

尽管如此，我发现只要选择一个框架，所有的框架都会被重新渲染。使用whyDidyouUpdate钩子（https://usehooks.com/useWhyDidYouUpdate/），我已将其精确定位到在每个渲染上更改的回调。

我尝试做onClick={useCallback(() => selectFrame(i),[])}，但是框架只是不改变颜色，向我表明这在某种程度上阻碍了回调的正常运行。

let Frame = memo(({frame,...}) => (
    <img style={{border: frame.selected ? "green" : "red";}} />
);

let Timeline = () => {

    let [frames,setFrames] = useState([
        { id: "00000",selected: True,...more image information },{ id: "00001",{ id: "00002",]);

    let selectFrame = (i) => {
        let newFrames = [...frames];
        newFrames[i].mask = base64;
        setFrames(newFrames);
    }

    return (
        <div>
        {frames.map((f,i) => (
            <Frame
                frame={f}
                key={f.id}
                onClick={() => selectFrame(i)}
            />
        )}
        </div>
    ));
}

对解决此问题的正确方法有何建议？谢谢

编辑：以下Drew的解决方案为我指明了正确的方向。正确的语法是：

const selectFrame = (i) => useCallback(() =>
    setFrames(frames.map((f,j) => (
        (i === j) ? {...f,selected: !f.selected} : f
    ))),[]);

每个功能都需要有一个不同的备注回调。

解决方法

memo HOC只是简单地比较道具，每次frames被映射时，都会创建一个 new onClick回调。转换为包含索引并返回的咖喱回调，并使用功能状态更新，并使用useCallback挂钩记录回调。

const Timeline = () => {

    const [frames,setFrames] = useState([
        { id: "00000",selected: True,...more image information },{ id: "00001",{ id: "00002",]);

    const selectFrame = useCallback(index => () => {
        setFrames(frames => frames.map((frame,i) => i === index ? {
          ...frame,mask: base64;
        } : frame));
    },[]);

    return (
        <div>
        {frames.map((f,i) => (
            <Frame
                frame={f}
                key={f.id}
                onClick={selectFrame(i)}
            />
        )}
        </div>
    ));
}