Реагировать на страницу с несколькими компонентами одного типа. Показывать больше одинаковых компонентов по нажатию кнопки, предотвращать повторный рендеринг в оригинальном наборе

Question

У меня есть сводная страница реакции, которая отображает линейные графики с использованием компонента ReportProgressSummary.

При первоначальной загрузке набор данных отображается для отображения нескольких из этих компонентов.

При нажатии кнопки расширения, ниже, отображается еще более крупный набор этих компонентов. Моя проблема в том, что исходные компоненты также перерисовываются.

Компонент отображает линейный график динамически, поэтому повторные визуализации очень очевидны. Есть ли способ предотвратить повторную визуализацию начальных компонентов?

Я думаю, что мне нужно записать процентное значение, достигнутое в компоненте ReportProgressSummary, и иметь возможность проверить его окончательное значение, чтобы увидеть если необходим повторный рендеринг ... возможно, с использованием useRef (), но я не совсем уверен, как ...

Например, если процентная переменная компонента уже достигла переданного результата 'result' значение, тогда не нужно будет отображать снова.

ReportProgressSummary Component:

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

Заранее спасибо

Answer 1

Причина в том, как вы устанавливаете атрибут key для сопоставленных компонентов:

key={shortid.generate()}

Каждый раз, когда отображается компонент Summary, значения ключей будут новыми уникальными shortid. Затем React распознает, что компонент будет повторно визуализирован, даже если ни один из реквизитов не был изменен.

Ключи должны быть настолько уникальными, насколько это необходимо, но они не должны быть изменены в пределах карты, если компонент не должен быть перерисован (имейте это в виду в случае, если вам нужно выполнить повторную визуализацию компонента). Фактически, они должны быть уникальными только среди своих братьев и сестер

Более того, существуют обстоятельства, когда использование index совершенно безопасно (см. Обновление: исключение из правила )