React自动更新DOM时是否有任何情况

时间:2017-05-02 05:18:54

标签: javascript reactjs

我在React上阅读的所有文章都显示了我应该显式调用this.setState()来触发DOM更新的代码。这似乎是手动触发变更检测。我调用this.setState,React重新呈现Virtual DOM,然后将其与本机DOM进行比较以进行更改 - 如果有任何更改,则更新DOM。来自文档的Here is the quote

  

4)浏览器每秒调用tick()方法。在里面,它   时钟组件通过调用setState()来调度UI更新   包含当前时间的对象。 感谢setState()调用,   React知道状态已更改,并再次调用render()方法   了解屏幕应该是什么。

将它与Angular摘要周期进行比较,自动检查绑定更改并更新DOM。虽然我有办法触发组件的手动更改检测,但通常不需要它。

我的问题是,当React触发DOM更新而不要求我手动调用this.setState(),即自动虚拟DOM更新时,是否存在任何情况?

1 个答案:

答案 0 :(得分:1)

React是一个状态机,它在内存中维护DOM的虚拟表示,当此状态发生变化时自动更新/呈现(适当时)。

您看到setState被调用触发重新呈现的原因是因为这是更新提供此内部DOM表示的数据结构的最常见(仅?)方法(反过来将通过儿童的财产减少。)

并非setState是手动调用,setState会导致状态更改,反过来导致React运行差异并在适当的时候更新。它是关于级联数据以反映应用程序的当前状态的全部内容。如果该状态未发生变化,则无需更新,因此无需重新渲染。

这也是为什么从React下改变DOM是一个非常糟糕的主意,因为这通常会导致React的DOM虚拟表示与<和<之间的奇偶性丢失。 em>实际 DOM。

尽量不考虑Angular绑定方面的React数据绑定,而是根据模拟Angular绑定在逐步状态更改的上下文中所做的事情来考虑它。

相关问题