在React中,可以使用map()
函数来更新列表项,而不重新渲染整个列表。以下是一个示例代码:
import React, { useState } from "react";
function App() {
const [list, setList] = useState(["Item 1", "Item 2", "Item 3"]);
const updateItem = (index, value) => {
setList(prevList => {
const newList = [...prevList];
newList[index] = value;
return newList;
});
};
return (
{list.map((item, index) => (
updateItem(index, e.target.value)}
/>
))}
);
}
export default App;
在上述代码中,list
是一个状态变量,用于存储列表项。updateItem()
函数用于更新列表项的值。在map()
函数中,我们为每个输入框指定了一个key
属性,并在onChange
事件中调用updateItem()
函数来更新列表项的值。
通过以上方式,当输入框的值发生改变时,只会更新对应项的值,而不会重新渲染整个列表。这样可以提高性能,并减少不必要的渲染。
下一篇:不重新渲染组件的链接