我有一个React组件,可以渲染一个相当大的输入列表(超过100个项目)。它可以在我的计算机上正常显示,但是手机上的输入延迟明显。 React DevTools显示,每次按键时都会重新渲染整个父对象。
有没有更有效的方法来解决这个问题?
https://codepen.io/anon/pen/YMvoyy?editors=0011
function MyInput({obj, onChange}) {
return (
<div>
<label>
{obj.label}
<input type="text" value={obj.value} onChange={onChange} />
</label>
</div>
);
}
// Passed in from a parent component
const startingObjects =
new Array(100).fill(null).map((_, i) => ({label: i, value: 'value'}));
function App() {
const [objs, setObjects] = React.useState(startingObjects);
function handleChange(obj) {
return (event) => setObjects(objs.map((o) => {
if (o === obj) return {...obj, value: event.target.value}
return o;
}));
}
return (
<div>
{objs.map((obj) => <MyInput obj={obj} onChange={handleChange(obj)} />)}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
答案 0 :(得分:6)
此问题与:
function handleChange(obj) {
return (event) => setObjects(objs.map((o) => {
if (o === obj) return {...obj, value: event.target.value}
return o;
}));
}
在此,您将更新objs
数组。显然这很好,但是React不知道发生了什么变化,因此在所有子项上触发了渲染。
如果给定相同的道具,功能组件呈现相同的结果,则可以将其包装在对React.memo的调用中以提高性能。
https://reactjs.org/docs/react-api.html#reactmemo
const MyInput = React.memo(({obj, onChange}) => {
console.log(`Rerendered: ${obj.label}`);
return <div style={{display: 'flex'}}>
<label>{obj.label}</label>
<input type="text" value={obj.value} onChange={onChange} />
</div>;
}, (prevProps, nextProps) => prevProps.obj.label === nextProps.obj.label && prevProps.obj.value === nextProps.obj.value);
但是,React.Memo仅在尝试确定是否应渲染时才进行浅表比较,因此我们可以将自定义比较函数作为第二个参数传递。
(prevProps, nextProps) => prevProps.obj.label === nextProps.obj.label && prevProps.obj.value === nextProps.obj.value);
基本上来说,如果obj
道具上的标签和值与先前的obj
道具上的先前属性相同,请不要重新渲染。
最后,setObjects
与setState非常相似,也是异步的,不会立即反映和更新。因此,为避免objs
错误和使用旧值的风险,您可以将其更改为回调,如下所示:
function handleChange(obj) {
return (event) => {
const value = event.target.value;
setObjects(prevObjs => (prevObjs.map((o) => {
if (o === obj) return {...obj, value }
return o;
})))
};
}
https://codepen.io/anon/pen/QPBLwy?editors=0011拥有所有这些内容以及console.logs,显示是否重新渲染了某些内容。
有没有更有效的方法来解决这个问题?
您将所有值存储在一个数组中,这意味着您不知道需要更新哪个元素,而无需遍历整个数组,比较对象是否匹配。
如果您是从Object开始的:
const startingObjects =
new Array(100).fill(null).reduce((objects, _, index) => ({...objects, [index]: {value: 'value', label: index}}), {})
进行一些修改后,您的handle函数将更改为
function handleChange(obj, index) {
return (event) => {
const value = event.target.value;
setObjects(prevObjs => ({...prevObjs, [index]: {...obj, value}}));
}
}