“React动态更新DOM”究竟意味着什么？

Question

The ReactJS website states that,

When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts .

What does this mean exactly?

How is this achieved?

How is this different from what AngularJS does?

Answer 1

Reactjs create a virtual DOM and does not touch to the real DOM. Then when some of DOM changed, it will use diff algorithm to find out what is different from previous state of DOM elements, finally just replace that changes. You can see this link for that algorithm to have more understanding. And you have to know what is shadow DOM as well.

Answer 2

Here's a great resource explaining why ReactJS was developed and how it differs from other frameworks like AngularJS:

http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look

"A lot of the heavyweight contenders for MVVM frameworks have a hard time rendering large amounts of data, like in lists and such. React doesn't have that problem, as it renders only what's changed.

For example, if a user is viewing a list of 100 items rendered with React, and he or she changes the third one down somehow, only that item gets rerendered, leaving the other 99 items unchanged."

( https://www.codementor.io/reactjs/tutorial/react-vs-angularjs )