how reactjs updates all the changes in dom in single event loop to paint dom only once

Question

我正在阅读有关reactjs中dom更新的文章.reactjs更新单个事件循环中的所有更改。我了解javascript中的事件循环及其在核心javascript中的工作方式。任何人都可以说出reactjs如何使用事件循环进行dom操作

Answer 1

React has a Virtual DOM, doesn't manipulate the DOM directly.

The Virtual DOM is a copy of the HTML DOM and is local to React. We can call it an abstraction of the HTML DOM. So, whatever changes need to be made to the DOM, React does that to this Virtual DOM and syncs the Real DOM accordingly.

React will update the entire Virtual DOM.

When we call the render() method it'll compare the Virtual DOM before updating, with the one after updating, to identify what objects have been changed. It uses the Diffing Algorithm.

Then compare the Virtual DOM with the real one, and only the changed objects will get updated on the real DOM.