- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的 react 项目中,我使用 react-window
用于呈现嵌套列表的包。每位家长 FixedSizeList
row 呈现一个使用另一个 FixedSizeList
的组件.父列表目前不超过 14 行。但是子列表最多可以包含 2000 行。现在我的问题是,当我尝试滚动父列表时,视口(viewport)中的所有子列表项似乎都重新呈现。这对我来说有点问题,因为在我的子列表项中我使用的是 d3js
绘制带有过渡效果的条形图。所以这些不必要的重新渲染给出了一个整体奇怪的用户界面。任何人都可以帮助我如何停止这些不必要的渲染。
Here是代码和框链接到我的问题的一个非常简单的例子。
请打开控制台日志。初始加载后,最上面的日志应该是这样的:initial console log .
然后,如果您清除控制台并滚动父列表,您将看到如下日志:console log after parent scrolling .在这里你可以看到子列表0的子列表项正在重新渲染,这对我来说是不需要的。
谁能给我一个可以阻止这些重新渲染的解决方案?
*附注我没有使用备忘录,因为每一行都在自己更新 dom。
编辑
我认为如果父列表停止向子级传播滚动事件,这个问题就会解决。我尝试添加 event.stopPropagation()
和 event.stopImmediatePropagation()
在父列表行中,但输出与之前相同。
最佳答案
我们可以使用 memo
摆脱为同一组 props
不必要地重新渲染的组件.并使用 useCallback
防止重新创建函数,从而确保子组件被重新渲染。应用这些,我们可以得到这个解决方案:
import "./styles.css";
import { FixedSizeList as List } from "react-window";
import { memo, useCallback } from "react";
const Row = memo(({ index: parentIndex, style: parentStyle }) => {
console.log("rendering child list", parentIndex);
const InnerRow = useCallback(({ index, style }) => {
console.log("rendering child list item", index, "of parent ", parentIndex);
return <div style={style}>Child Row {index}</div>;
}, []);
return (
<div style={parentStyle}>
<List height={200} itemCount={1000} itemSize={35} width={270}>
{InnerRow}
</List>
</div>
);
});
const Example = () => {
console.log("rendering parent list");
return (
<List height={400} itemCount={16} itemSize={300} width={300}>
{Row}
</List>
);
};
export default function App() {
return (
<div className="App">
<Example />
</div>
);
}
关于javascript - 滚动父 FixedSIzeList 时,react-window 停止不必要的渲染子 FixedSizeList 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68649484/
在我的 react 项目中,我使用 react-window用于呈现嵌套列表的包。每位家长 FixedSizeList row 呈现一个使用另一个 FixedSizeList 的组件.父列表目前不超过
我正在使用名为 react-window 的库 当我像这样将 Prop 传递到其行时: {Row({...props, {otherProps}})} 它给了我一个类似的错误: React.creat
我是一名优秀的程序员,十分优秀!