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;

我的问题是，每当我向状态对象添加一个svg <circles>时，是否会重新呈现所有svg declare？或者React认为状态中的那些已经存在并且不需要对它们做任何事情。

Answer 1

每当您添加一个<circle>标记或更新状态时，都会重新呈现所有.map标记。

在呈现集合（key）时，React建议使用circles.map(circle => <Circle key={circle.id} x={circle.x} y={circle.y} r="5" /> )属性，该属性的值唯一标识正在呈现的实例。

为了实现这一点，我建议在圆形对象中添加一个id属性，然后将其渲染为：

<Circle key="1" ... />

因此，下次React进行差异时，它知道将<Circle key="1" ... />与影子DOM中的<meta name="viewport" content="width=device-width, initial-scale=1">进行比较，并且只有在更改后才更新DOM。

我能正确理解Virtual Dom吗？

1 个答案: