具有多个相同类型组件的React页。在单击按钮时显示更多相同的组件，防止在原始集中重新渲染

admin

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

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

单击展开按钮后，将在下面呈现这些组件的更多更大的集合。我的问题是，初始组件也会重新呈现。

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

我在想，我需要记录在ReportProgressSummary组件中达到的百分比值，并能够根据它的最终值进行测试，看看是否需要重新呈现……也许可以使用useRef()，但我不太确定如何...

例如，如果组件的百分比变量已经达到了传入的“result”值，则不需要再次呈现。

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>
    )
};

提前感谢

转载请注明出处:http://www.intsu.net/article/20230429/1786935.html