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

我有下面的React应用程序（）：

const ListItem=（道具）=>{
返回(
项目{props.index}
)
}
const initialItems=[“item1”、“item2”、“item3”、“item4”、“item5”]
常量应用=（道具）=>{
常量[activeIndex，setActiveIndex]=React.useState（0）；
常数goUp=（）=>{
如果（活动索引）{
如果（activeIndex>=initialItems.length-1）返回；
setActiveIndex（activeIndex+1）；
}
返回(

向上的
向下

{initialItems.map（（项，索引）=>(
))}
)
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

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

---

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

您可以使用React.memo（）将ListItem包装为

这是您的ListItem组件

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

const ListItem=（道具）=>{
返回(
项目{props.index}
)
};

通过使用React.Memo（）

const ListItem=React.memo（（道具）=>{
返回(
项目{props.index}
)
});

在这种情况下，

ListItem

仅在道具更改时呈现

---

有关console.log（）s的详细信息，请参阅并查看。

有手动解决方法（如memoize

ListItem

），但似乎您希望我认为您应该在react应用程序中使用purecomponent。您可以在此链接中阅读有关purecomponent的内容（）正如我所知，由于您在列表中使用了键，React巧妙地管理了这一点，并且不重新呈现完整列表。您如何检查完整列表是否重新呈现？@SuleymanSah如果您在ListItem组件上放置断点，它将在每次活动索引更改时调用render（对于所有项目）。我添加了一个console.log来指示问题。@Kai，是的，每次状态更改时组件都会重新渲染，但这并不意味着React将在dom中重新渲染完整列表。您可以在浏览器开发人员工具中检查这一点。只要渲染速度快，重新渲染就不是问题。但我已经检查了，这似乎是我一直在寻找的或者现在检查更新。检查console.log消息。

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