如何有条件地更新反应列表组件

Question

我在下面有React应用程序(jsfiddle(：

const ListItem = (props) => {
return (
<div className={props.active ? "active" : ""}>Item {props.index}</div>
)
}
const initialItems = ["item1", "item2", "item3", "item4", "item5"]
const App = (props) => {
const [activeIndex, setActiveIndex] = React.useState(0);
const goUp = () => {
if(activeIndex <= 0) return;
setActiveIndex(activeIndex - 1);
}
const goDown = () => {
if(activeIndex >= initialItems.length - 1) return;
setActiveIndex(activeIndex + 1);
}
return (
<div>
<p>
<button onClick={goUp}>Up</button>
<button onClick={goDown}>Down</button>
</p>
<div>
{initialItems.map((item, index) => (
<ListItem active={index === activeIndex} index={index} key={index} />
))}
</div>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('container')
);

使用按钮可以突出显示当前列表元素。当前方法的问题在于，每次活动索引更改时，它都会重新呈现完整列表。就我而言，列表可能非常大(数百个项目(，布局更复杂，这会带来性能问题。

如何修改此代码，使其仅更新特定的列表项组件，而不会触发所有其他组件的重新呈现？我正在寻找一种没有第三方库和直接 DOM 操作的解决方案。

Answer 1

你可以像这里一样用React.memo((包装ListItem。

这是您的列表项组件，

const ListItem = (props) => {
return (
<div className={props.active ? "active" : ""}>Item {props.index}</div>
)
};

通过使用 React.Memo((，

const ListItem = React.memo((props) => {
return (
<div className={props.active ? "active" : ""}>Item {props.index}</div>
)
});

在这种情况下，ListItem仅在道具更改时呈现。

有关更新的 JsFiddle 并检查 console.log(( s。