0

我正在对 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 是否区分了状态中的那些已经存在并且不需要对它们做任何事情的事实。

4

1 回答 1

0

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

渲染集合 ( .map) 时，React 建议使用key具有唯一标识正在渲染的实例的值的属性。

因此，为了实现这一点，我建议向 circle 对象添加一个 id 属性，然后将其呈现为：

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

因此，下次 React 进行 diff 时，它知道将<Circle key="1" ... />与<Circle key="1" ... />shadow DOM 中的 进行比较，并且仅在 DOM 发生更改时才更新 DOM。

于 2016-01-27T17:33:05.960 回答