在反应重新渲染中，如何防止将滚动条重置到其他未更改组件的最顶端？

Question

我有以下示例反应代码

const A = () => {
    const [value1, setValue1] = React.useState(true);
    const [value2, setValue2] = React.useState(true);

    return (
    <div>
        <div class="first-comp">
             <FirstComponent data1={value1} data2={value2} />
        </div>
        <div class="second-comp">
             <SecondComponent onChange={() => {setValue1(false); setValue2(false);}} />
        </div>
    </div>
    )
}

当 SecondComponent 调用 onChange 时，“first-comp”和“second-comp”都会在屏幕上重新呈现。

自从重新渲染 SecondComponent 后，我的滚动条正在重置（即，如果我在 SecondComponent 中向下滚动内部滚动条，则在重新渲染 SecondComponent 时，SecondComponent 会在顶部呈现，而不是在我之前的位置最后滚动到)

有没有一种方法可以在 onChange 更改 stateVariables 时，<SecondComponent /> 不会重新呈现，或者滚动不会在 SecondComponent 中受到干扰，或者以某种方式保留滚动？

Answer 1

问题是在使用 setValue 更改状态时，反应是运行第二个组件的 UI。

使用此处提到的 shouldComponentUpdate() https://www.geeksforgeeks.org/reactjs-shouldcomponentupdate-method/ 或使用 React.memo 来防止重新渲染

我配置为在 value1 和 value2 更改时不更新

在反应重新渲染中，如何防止将滚动条重置到其他未更改组件的最顶端？

In react re-rendering, how to prevent resetting of the scrollbar to topmost point of other non-changed components?

javascript

reactjs

react-dom

react-hooks