ReactJS渲染函数是注入全部还是部分添加的DOM元素？

Question

I am going through the official React Tutorial at https://facebook.github.io/react/docs/tutorial.html

 var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({ data: data }); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }) }, handleCommentSubmit: function(comment) { $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: comment, success: function(data) { this.setState({ data: data }); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); // body... } }); }, getInitialState: function() { return { data: [] }; }, componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return ( < div className = "commentBox" > < h1 > Comments < /h1> <CommentList data={this.state.data} / > < CommentForm onCommentSubmit = { this.handleCommentSubmit } /> </div > ); } }) 

This is only one but major part of the comment rendering. In the render function, does ReactJS destroy the previous DOM elements, and create a new DOM element tree based on XHR data received, or does it compare with the old tree and only add the diff s? If it creates completely new elements, how does it do it so fast, as I am perceiving from the narrative of the tutorials that React does this exceptionally faster than other frameworks?

Answer 1

does ReactJS destroy the previous DOM elements, and create a new DOM element tree based on XHR data received, or does it compare with the old tree and only add the diffs?

React diffs/compares the new DOM tree with the previous(old), and only renders the diffs.

You find the explanation in the official API doc here .

"Note: ReactDOM.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React's DOM diffing algorithm for efficient updates. ReactDOM.render() does not modify the container node (only modifies the children of the container). In the future, it may be possible to insert a component to an existing DOM node without overwriting the existing children."