DOM 更新后,reactjs 是否有可能收到通知?
reactjs is it possible to get a notification after the DOM is updated?
我有一个组件可以呈现多达一千个元素的列表。
更新 DOM 需要 3/5 秒,我的意思是在组件事件 componentDidUpdate 之后,它在更改刷新到 DOM 后调用,需要 3/5实际看到 DOM 更新的秒数。
我想展示一个旋转的齿轮或其他东西,但我不知道怎么做,因为我不知道如何在 DOM 更新完成时得到通知。
有人知道吗?
Javascript是单线程的,所有DOM操作都是阻塞的。这意味着如果浏览器忙于添加和更新 DOM,这将锁定 Javascript 线程,直到更新 DOM。在实际更新期间,您无法在代码中执行任何操作。
这是假设 UI 锁定实际上来自原始的、非常大量的 DOM 操纵,而不是其他一些潜在的罪魁祸首。 @zerkms 的评论也很准确,动画 gif、CSS 动画等通常不会 运行 当浏览器被锁定执行大量计算时。
如果您预计浏览器会锁定,最简单的解决方案是显示一些微调器覆盖,然后 运行 更新数据的命令。这样微调器就已经在 DOM 中了。更新完成后,您可以移除微调器。它可能看起来像
render() {
return <div>
<div onClick={ this.performLongRunningAction }>click me</div>
{ this.state.spinnerVisible ? 'Loading' : null }
</div>
}
performLongRunningAction() {
// First show the spinner...
this.setState({ spinnerVisible: true }, () => {
// Then after state has been set and spinner rendered, start the
// long action
executeLongRunningActionNow();
});
}
// Then you need some mechanism to turn off the spinner state after the
// task has completed
componentWillReceiveProps( nextProps ) {
// Did a task execute? Turn off the spinner before the next render
if( nextProps.someCompletedFlag !== this.props.someCompletedFlag ) {
this.setState({ spinnerVisible: false });
}
}
另一种解决方案是将更新分成多个块,这样您就可以以足够小的间隔更新 DOM,而不会锁定 Javascript 线程。您提供了代码,因此无法充实此解决方案。
我有一个组件可以呈现多达一千个元素的列表。
更新 DOM 需要 3/5 秒,我的意思是在组件事件 componentDidUpdate 之后,它在更改刷新到 DOM 后调用,需要 3/5实际看到 DOM 更新的秒数。
我想展示一个旋转的齿轮或其他东西,但我不知道怎么做,因为我不知道如何在 DOM 更新完成时得到通知。
有人知道吗?
Javascript是单线程的,所有DOM操作都是阻塞的。这意味着如果浏览器忙于添加和更新 DOM,这将锁定 Javascript 线程,直到更新 DOM。在实际更新期间,您无法在代码中执行任何操作。
这是假设 UI 锁定实际上来自原始的、非常大量的 DOM 操纵,而不是其他一些潜在的罪魁祸首。 @zerkms 的评论也很准确,动画 gif、CSS 动画等通常不会 运行 当浏览器被锁定执行大量计算时。
如果您预计浏览器会锁定,最简单的解决方案是显示一些微调器覆盖,然后 运行 更新数据的命令。这样微调器就已经在 DOM 中了。更新完成后,您可以移除微调器。它可能看起来像
render() {
return <div>
<div onClick={ this.performLongRunningAction }>click me</div>
{ this.state.spinnerVisible ? 'Loading' : null }
</div>
}
performLongRunningAction() {
// First show the spinner...
this.setState({ spinnerVisible: true }, () => {
// Then after state has been set and spinner rendered, start the
// long action
executeLongRunningActionNow();
});
}
// Then you need some mechanism to turn off the spinner state after the
// task has completed
componentWillReceiveProps( nextProps ) {
// Did a task execute? Turn off the spinner before the next render
if( nextProps.someCompletedFlag !== this.props.someCompletedFlag ) {
this.setState({ spinnerVisible: false });
}
}
另一种解决方案是将更新分成多个块,这样您就可以以足够小的间隔更新 DOM,而不会锁定 Javascript 线程。您提供了代码,因此无法充实此解决方案。