gpt4 book ai didi

javascript - React-window,如何防止状态更改时重新渲染列表?

转载 作者:行者123 更新时间:2023-12-02 19:28:55 27 4
gpt4 key购买 nike

这是我的代码沙箱示例: https://codesandbox.io/s/react-hooks-counter-demo-kevxp?file=/src/index.js

我的问题是:该列表将始终在页面内的每个状态更改时重新呈现,因此滚动将始终回到顶部。我想知道为什么会发生这种情况,以及如何防止这种行为,即使列表的状态发生了变化,然后保持列表的最后滚动位置

最佳答案

每次App呈现,您正在为 Example 创建一个全新的定义成分。它可能与旧组件做同样的事情,但它是一个新组件。因此 React 将一个渲染的元素与下一个渲染的元素进行比较,发现它们具有不同的组件类型。因此,它被迫卸载旧的并安装新的,就像您从 <div> 更改某些内容一样。到 <span> .新的开始滚动到 0。

解决方案是在 App 之外只创建一次 Example。

const Example = props => (
<List
className="List"
height={80}
itemCount={props.propsAbc.length}
itemSize={20}
width={300}
itemData={{
dataAbc: props.propsAbc
}}
>
{({ index, style, data }) => (
<div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
{data.dataAbc[index]}
</div>
)}
</List>
);

function App() {
const [count, setCount] = useState(0);
let [dataArray, setDataArray] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

return (
<div className="App">
<h1>Scroll down the blue box, then click the button</h1>
<h2>You clicked {count} times!</h2>

<button onClick={() => setCount(count - 1)}>Decrement</button>
<button onClick={() => setCount(count + 1)}>Increment</button>

<div
style={{ maxHeight: "80px", overflow: "äuto", background: "lightblue" }}
>
<Example propsAbc={dataArray} />
</div>
</div>
);
}

https://codesandbox.io/s/react-hooks-counter-demo-qcjgj

关于javascript - React-window,如何防止状态更改时重新渲染列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62097956/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com