如何解决在父级中更新反应状态非常慢
我正在开发一个 React 应用程序,我一直认为 React 状态更新非常快,但现在我发现了一个问题。
我有一个页面视图,上面有很多元素,其中一个元素是加载到页面中的元素:
<NotesCard notes={deal.notes} updateNotes={notes => {setDeal(prevState => ({...prevState,notes}))}} />
NotesCard 是一个子组件,它只渲染一个带有另一个 react 组件的 material-ui Card :
export default function NotesCard(props) {
const {notes,updateNotes} = props;
return (
<Card className="Card">
<CardHeader
title="Notities"
/>
<CardContent>
<Notes notes={notes} onChange={updateNotes} />
</CardContent>
</Card>
);
}
Notes 是渲染文本字段的最后一个组件,并且只将 props 带到 TextField:
function Notes(props) {
const {notes} = props;
function updateNotes(event) {
// props.deal.notes = event.target.value;
props.onChange(event.target.value);
}
return (
<div>
<FormGroup>
{notes !== null ?
<TextField
multiline
defaultValue={notes}
onChange={e => updateNotes(e)}
rows={3}
variant={'outlined'}
label={'Notities'}
/>
: 'Geen beschrijving...'}
</FormGroup>
</div>
);
}
是不是我做错了什么导致了很多延迟?该页面是一个大页面,因此可能与此有关,但我认为更新性能仍然可以。
解决方法
您的目标是修复缓慢的渲染,只有这样您才会在必要时查看重新渲染的次数。 请安装 react-dev-tools,其中包含在重新渲染时标记组件的选项。或者,您还可以在几秒钟内监视性能并调查渲染。这应该可以帮助您了解什么会对您的操作产生不必要的影响。
我看到了这个潜在的问题:
<Notes notes={notes} onChange={updateNotes} />
如果您触发 onChange,则父状态会发生变化。这会导致所有孩子重新渲染。我认为只有单曲会改变,这个组件的改变不会影响其他兄弟姐妹。因此,尝试将状态移动到尽可能靠近其使用位置的位置。如果您触发 onChange 只应该更新。这是一个简单的方法,可以在不使用 Memo 之类的 React 功能的情况下解决大量性能问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。