我是否正確理解Virtual Dom？

我正在對React程序進行基本介紹，並且想知道我是否正確理解虛擬dom的區別。我是否正確理解Virtual 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;

我的問題是，做所有的SVG <circles>得到重新渲染每當我添加一個狀態對象？或者，React不同意這樣一個事實，即州內的人已經在那裏，不需要對他們做任何事情。

來源

2016-01-26 adam-beck

這可能有所幫助：https：//facebook.github.io/react/docs/reconciliation.html。反應只會改變什麼改變。 –

所有<circle>標記只要添加一個或更新狀態就會重新呈現。

當呈現集合（.map）時，React建議使用key屬性，該屬性的值唯一標識了要呈現的實例。

因此，要實現這一點，我建議增加一個id屬性的圈子對象，然後呈現爲：

circles.map(circle => 
    <Circle key={circle.id} x={circle.x} y={circle.y} r="5" /> 
)

因此，下一次

該陣營使得它知道到<Circle key="1" ... />與<Circle key="1" ... />在比較一個差異陰影DOM，並且只在更改DOM時更新。

來源

2016-01-27 17:33:05 guzart

我是否正確理解Virtual Dom？

回答

相關問題