1

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

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

4

2 回答 2

3

每次App渲染时，您都在为组件创建一个全新的定义Example。它可能与旧组件做同样的事情，但它是一个新组件。因此，react 将来自一个渲染的元素与下一个渲染的元素进行比较，并查看它们具有不同的组件类型。因此，它被迫卸载旧的并安装新的，就像你将某些东西从 a 更改<div>为 a一样<span>。新的开始滚动到 0。

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

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

于 2020-05-30T04:58:44.957 回答
1

我认为这不是反应窗口问题。

一个反应组件重新渲染是因为状态发生了变化。在这种情况下，状态更改是由 setCount 引起的（当您单击增量按钮时），它会重新渲染包括 Example 在内的整个组件。

如果 Example 是它自己的组件，则滚动位置不会被刷新，因为它不再依赖于计数状态。

这里有一个工作示例： https ://codesandbox.io/s/react-hooks-counter-demo-hbek7?file=/src/index.js

于 2020-05-30T05:02:04.960 回答