一种检查ReactJS中html是否已更改的方法

Question

我有一个JS代码应该做一些事情（动画等）。在ReactJS之前可能（或不）更新HTML元素。我为此目的获取了这个HTML元素的整个模板（即页面的一部分，特别是一个小部件）。

例如，我有一些包含某些内容的DIV，这些内容可能会随时间而变化。然后我通过AJAX调用获得了该DIV的新版本（即作为HTML模板），我希望ReactJS首先将实际（或虚拟）当前DOM与刚刚检索到的同一DIV的新HTML模板进行比较成功时从AJAX调用获得的字符串。只有这样 - 当这两者不同时 - 首先做动画才有意义，然后才能通过React JS在浏览器中更新实际的DOM。

怎么做？ React JS中是否有一种方法可以让我获得例如将虚拟DOM与其新版本作为通过AJAX获取的HTML模板进行比较时是真/假（因为它无论如何都在内部执行此操作 - 即在算法中比较当前和更新的DOM）？

编辑：在初步认为ReactJS比我的情况下其他JS框架好得多（即服务器功能已经开发）之后，我发现多个功能不够灵活;更进一步，我发现ReactJS不够智能，无法确定列表顶部只添加了一个元素（ReactJS替换列表的整个DOM模板，即使为每个元素设置了键！），这表明它仍然是不像人们所期望的那样成熟。 此外，所有带有*** Component *** Update的生命周期方法都不会被调用; only *** Component ***在提到的列表中调用Unmount。我可以通过更简单的方式自己做，但Relay / Flux + ReactJS架构仍然很好，我想我会放弃Facebook的实现，并用我自己的解决方案替换它，灵感来自Relay / Flux + ReactJS。 / p>

Answer 1

您可能希望查看以下生命周期方法：

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

来自反应文档：

<强> componentWillUpdate

在呈现新的道具或状态时立即调用。初始渲染不会调用此方法。 使用此作为在更新发生之前执行准备的机会。

<强> componentDidUpdate

在将组件的更新刷新到DOM后立即调用。初始渲染不会调用此方法。 将此作为在组件更新时对DOM进行操作的机会。