The role of virtual dom is less to operate real DOM.
DOM Diff algorithm used to determine which regions may be updated region which need not be updated, the final update area is reduced.
Change the virtual DOM interface is not updated, but the change in real DOM interface will update, in which react as programmers we almost do not need to manually update the DOM true, we only need to update the virtual DOM, how to trigger the update virtual DOM is updated components state, will be re-generated virtual DOM, and then generate real dom, efficiency Gaobu Gao is mainly reflected in the updated interface is a variety of operations once displayed.
The figure above shows
the use of which can only react setState () status update state, the old data can not be changed directly, but first data to generate a new, re-create the virtual DOM tree, and then compare the old and new data, experience differencing virtual DOM tree, last updated DOM differences correspond to the real, to achieve local interface redraw, DOM Diff algorithm can achieve a minimum redraw.