reactjs DOM更新后是不是有可能收到通知?

Posted

技术标签:

【中文标题】reactjs DOM更新后是不是有可能收到通知?【英文标题】:reactjs is it possible to get a notification after the DOM is updated?reactjs DOM更新后是否有可能收到通知? 【发布时间】:2017-01-27 17:35:19 【问题描述】:

我有一个组件可以呈现多达一千个元素的列表。

更新 DOM 需要 3/5 秒,我的意思是在组件事件 componentDidUpdate(在更改刷新到 DOM 后调用)之后,实际看到 DOM 更新需要 3/5 秒。

我想展示一个旋转的齿轮或其他东西,但我不知道如何,因为我不知道如何在 DOM 更新完成时收到通知。

有人知道吗?

【问题讨论】:

如果浏览器忙于执行 DOM 操作(或一般地评估 JS) - 微调器将不会动画。 对,我倾向于忘记那部分。尽管如此,正如@Andy-Ray 建议的那样,我可以展示一些东西,比如没有微调器的“请稍候”,并在 DOM 实际更新后将其删除,只要我有办法知道 DOM 何时最终更新。但我不知道怎么做。除非我做一些丑陋的事情,比如轮询/setTimeOut 来检查 DOM 是否发生了变化。 【参考方案1】:

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 线程。您已提供代码,因此无法充实此解决方案。

【讨论】:

好的,我可以在“渲染”之前显示微调器。但是由于在“componentDidUpdate”之后发生锁定,当更改已刷新到 DOM 时,我如何才能获得关闭微调器的通知?我现在唯一的想法是轮询/setTimeOut 来检查 DOM 是否真的发生了变化,这看起来太可怕了。 我认为另一个问题的 this answer 在这里有帮助。

以上是关于reactjs DOM更新后是不是有可能收到通知?的主要内容,如果未能解决你的问题,请参考以下文章

为什么选择我--ReactJS

用户收到推送通知后更新表视图中的数据

ReactJs的虚拟dom是个啥情况?

Apple Watch 是不是有可能仅在 Apple Watch 和 iPhone 都被锁定时才收到通知?

Android - 收到推送通知 FCM 后,如何在我的 Activity 中更新数据或 UI?

更新应用程序后在 Work Light 6.0 中收到多次推送通知