javascript - React 有没有自动更新 DOM 的情况

Question

我读过的所有关于 React 的文章都显示了我应该显式调用 this.setState() 来触发 DOM 更新的代码。这似乎是手动触发变化检测。我调用 this.setState，React 重新渲染虚拟 DOM，然后将其与 native DOM 进行比较以了解更改 - 如果有任何更改，则更新 DOM。 Here is the quote来自文档:

4) Every second the browser calls the tick() method. Inside it, the Clock component schedules a UI update by calling setState() with an object containing the current time. Thanks to the setState() call, React knows the state has changed, and calls render() method again to learn what should be on the screen.

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

我的问题是，是否存在 React 触发 DOM 更新而不需要我手动调用 this.setState() 的情况，即自动虚拟 DOM 更新？

Answer 1

React 是一个状态机，它在内存中维护 DOM 的虚拟表示，当状态发生变化时，它会自动更新/渲染(在适当的情况下)。

您看到 setState 被调用以触发重新渲染的原因是因为这是更新提供此内部 DOM 的数据结构的最常见(唯一？)方法表征(反过来又会通过子代的属性向下反馈)。

这并不是说 setState 是对重新渲染的手动调用，而是 setState 导致状态发生变化，从而导致 React运行 diff 并在适当的情况下更新。这一切都是为了级联数据以反射(reflect)应用程序的当前状态。如果该状态未更改，则无需更新任何内容，因此无需重新渲染。

这也是为什么从 React 中改变 DOM 是一个非常糟糕的主意，因为这通常会导致 React 的虚拟表示与实际 DOM 之间失去对等性。 DOM。

尽量不要从 Angular 绑定(bind)的 Angular 来考虑 React 数据绑定(bind)，而是从模拟 Angular 绑定(bind)在逐步状态更改的上下文中所做的事情来考虑。