Javascript 使用相同类型的多个组件对页面进行反应。单击按钮时显示更多相同组件，防止在原始集中重新渲染

我有一个react摘要页面，通过使用ReportProgressSummary组件显示折线图

初始加载时，数据集被映射以显示这些组件中的多个

单击“展开”按钮后，下面将呈现一组更大的组件。我的问题是初始组件也会重新渲染

该组件动态显示线图渲染，因此重新渲染非常明显。有没有办法防止重新渲染初始组件

我认为我需要记录ReportProgressSummary组件中达到的百分比值，并能够根据其最终值进行测试，以查看是否需要重新渲染。。。可能使用useRef（），但我不太确定如何

例如，如果组件的百分比变量已达到传入的“结果”值，则无需再次渲染

ReportProgressSummary组件：

const ReportProgressSummary = ({result, title}) => {
    const [percent, setPercent] = useState(0);
    let timer = React.useRef();

    useEffect( () => {
        let newPercent = percent + 1;
        if (newPercent > result) {
            clearTimeout(timer.current);
            return;
        }
        timer.current = setTimeout(() => setPercent(newPercent), 1);
    }, [percent]);

    return (
        <ContainerStyled>
            <ChartContainerStyled>
                <ChartTitleStyled>{title}</ChartTitleStyled>
                <CheckboxStyled type="checkbox" />
            </ChartContainerStyled>
            <ChartContainerStyled>
                <LineContainerStyled>
                    <Line trailWidth="2" trailColor="red" strokeWidth="4" strokeColor="green" percent={percent}/>
                </LineContainerStyled>
                <h6>{percent}%</h6>
            </ChartContainerStyled>
        </ContainerStyled>
    )
};

export default ReportProgressSummary;

const Summary = () => {
    const [expand, setExpand] = useState(false);
    const [buttonText, setButtonText] = useState("expand");

    const onButtonClick = () => {
        setExpand(!expand);
        if(!expand) setButtonText("hide");
        else setButtonText("expand");
    };

    return (
        <div className="test">
            <PageTitle title="System Overview"/>
            <ContainerStyled>
            {
                selectedRules.map(rule => {
                    return <ReportProgressSummary result={rule.percentage} title={rule.name} key={shortid.generate()}/>
                })
            }
            </ContainerStyled>

            <ButtonStyled onClick={() => onButtonClick()}>{buttonText}</ButtonStyled>
            {
                expand &&
                <ContainerStyled>
                    {
                        nonSelectedRules.map(rule => {
                            return <ReportProgressSummary result={rule.percentage} title={rule.name} key={shortid.generate()}/>
                        })
                    }
                </ContainerStyled>
            }
        </div>
    )
};

constreportprogresssummary=（{result，title}）=>{
const[percent，setPercent]=useState（0）；
让timer=React.useRef（）；
useffect（（）=>{
让newPercent=percent+1；
如果（新百分比>结果）{
clearTimeout（定时器电流）；
返回；
}
timer.current=setTimeout（（）=>setPercent（newPercent），1）；
}，[百分比]；
返回(
{title}
{percent}%
)
};
导出默认报告摘要；

摘要部分：

const ReportProgressSummary = ({result, title}) => {
    const [percent, setPercent] = useState(0);
    let timer = React.useRef();

    useEffect( () => {
        let newPercent = percent + 1;
        if (newPercent > result) {
            clearTimeout(timer.current);
            return;
        }
        timer.current = setTimeout(() => setPercent(newPercent), 1);
    }, [percent]);

    return (
        <ContainerStyled>
            <ChartContainerStyled>
                <ChartTitleStyled>{title}</ChartTitleStyled>
                <CheckboxStyled type="checkbox" />
            </ChartContainerStyled>
            <ChartContainerStyled>
                <LineContainerStyled>
                    <Line trailWidth="2" trailColor="red" strokeWidth="4" strokeColor="green" percent={percent}/>
                </LineContainerStyled>
                <h6>{percent}%</h6>
            </ChartContainerStyled>
        </ContainerStyled>
    )
};

export default ReportProgressSummary;

const Summary = () => {
    const [expand, setExpand] = useState(false);
    const [buttonText, setButtonText] = useState("expand");

    const onButtonClick = () => {
        setExpand(!expand);
        if(!expand) setButtonText("hide");
        else setButtonText("expand");
    };

    return (
        <div className="test">
            <PageTitle title="System Overview"/>
            <ContainerStyled>
            {
                selectedRules.map(rule => {
                    return <ReportProgressSummary result={rule.percentage} title={rule.name} key={shortid.generate()}/>
                })
            }
            </ContainerStyled>

            <ButtonStyled onClick={() => onButtonClick()}>{buttonText}</ButtonStyled>
            {
                expand &&
                <ContainerStyled>
                    {
                        nonSelectedRules.map(rule => {
                            return <ReportProgressSummary result={rule.percentage} title={rule.name} key={shortid.generate()}/>
                        })
                    }
                </ContainerStyled>
            }
        </div>
    )
};

const Summary=（）=>{
const[expand，setExpand]=useState（false）；
常量[buttonText，setButtonText]=useState（“扩展”）；
常量onButtonClick=（）=>{
setExpand（！expand）；
如果（！展开）setButtonText（“隐藏”）；
else setButtonText（“扩展”）；
};
返回(
{
selectedRules.map（规则=>{
返回
})
}
onButtonClick（）}>{buttonText}
{
扩展&&
{
nonSelectedRules.map（规则=>{
返回
})
}
}
)
};

---

提前感谢

原因是您如何设置映射组件上的

键

属性：

key={shortid.generate()}

每次呈现

摘要

组件时，键的值都将是一个新的唯一

shortid

。即使道具没有改变，React Designes也会重新启用该组件

键应尽可能唯一，但不应在映射中更改它们，除非组件应重新渲染（请记住这一点，以防需要强制组件重新渲染）。其实,

---

此外，在某些情况下，使用

索引

是完全安全的（请参阅）

在每次呈现

摘要

时，

键

属性的值将是一个新的随机生成的

shortid

。这将告诉React重新渲染生成的组件。找到另一种方法使您的密钥唯一，而无需在每次渲染时调用

shortid.generate（）

。太好了，成功了-谢谢！作为一个快速测试，我刚刚将该键切换为数组索引，但我知道不建议这样做。您可以推荐钥匙的最佳实践吗？我不确定行业最佳实践是什么。我通常使用索引加上一些组件特有的文本标识符。在本例中，我可能使用

选定规则rpg-${index}

。但是如果组件被重用，您还可以在组件定义之外生成一个

shortid

，这样每个实例生成一次，并将其与索引一起使用。外部

Summary

：

const randId=shortid.generate（）

。在，

Summary

中，对于列表：

selectedrules rpg-${index}-${randId}

我将重写这个问题的答案，以防社区中的其他人有同样的问题。我还将在上面的一些研究中添加一些关于ID的更新。