reactjs - Virtual Dom を正しく理解していますか?

Question

私は React プログラムの基本的な紹介に取り組んでおり、仮想 dom の差分を正しく理解しているかどうか疑問に思っていました。

私はこの小さなアプリを持っています:

import React, { Component } from 'react';

const svgStyle = {
  border: '1px solid black'
};

const Circle =({x, y}) => (
  <circle cx={x} cy={y} r="5" />
);

class Canvas extends Component {
  constructor(props) {
    super(props);

    this.state = {
      circles: []
    };

    this.addCircle = this.addCircle.bind(this);
  }

  addCircle(e) {

    const {left: rectLeft, top: rectTop} = e.target.getBoundingClientRect();
    const {clientX, clientY} = e;

    this.setState({
      circles: this.state.circles.concat([{x: clientX - rectLeft, y: clientY - rectTop}])
    });
  }

  render() {
    var {circles} = this.state;

    return (
      <svg width="500" height="500" viewBox="0 0 500 500" onClick={this.addCircle} style={svgStyle}>
        {
          circles.map(circle => (<Circle x={circle.x} y={circle.y} r="5" />))
        }
      </svg>
    );
  }
}

export default Canvas;

私の質問は、<circles>状態オブジェクトに svg を追加するたびに、すべての svg が再レンダリングされるのですか? または、React は、状態にあるものが既に存在し、それらに対して何もする必要がないという事実を比較しますか。