为什么不响应子组件的缓存html元素？

Question

希洛！

我想知道下面的反应例子有什么问题，或者如果反应的效果与我想象的不同？

当父组件是两个不同的组件时，我正在寻找一种方法来重用子响应组件的基础html元素。

在下面的示例中，我希望在调用renderC1和renderC2之后，循环组件内部有相同的元素。例如，我可以应用一个transition属性来动画颜色开关，就像我只是在元素上直接更改样式一样。

当我呈现下面的内容时，React似乎总是生成不同的HTML元素，DIV上的ref、key或id (在循环的呈现函数中)没有多大帮助。

因此，我的问题是:在呈现C1时，是否有可能对重用通过C2呈现的DIV做出反应？我认为这就是React应该如何工作，优化底层HTML元素吗？

类似于：

var C1 = React.createClass({
  render: function () {
    return (
        <Circle background="deeppink" onClick={renderC2}/>
     );
  }
});

function renderC1 () {
  React.render(
    <C1 />, 
    document.getElementById('mount-point'));
}

var C2 = React.createClass({
  render: function () {
    return (
        <Circle background="salmon" onClick={renderC1}/>
     );
  }
});

function renderC2 () {
      React.render(
    <C2 />, 
    document.getElementById('mount-point'));
}

var Circle = React.createClass({
  styler: {
    width: "100px",
    height: "100px",
    mozBorderRadius: "50%",
    webkitBorderRadius: "50%",
    borderRadius: "50%",
    background: 'hotpink'
  },

  componentWillMount: function() {
    if (this.props && this.props.background &&
       this.props.background !== this.styler.background) {
         this.styler.background = this.props.background;
    }
  },

  render: function() {
    return (
      {/* tried adding key, ref and id, but does not reuse element */}
      <div onClick={this.props.onClick} style={this.styler}></div>
    );
  }
});

renderC1();

Answer 1

这是不可能的。DOM不允许一个元素同时位于两个位置。尝试将DOM元素放入新位置将自动从旧位置删除它。

你可以在这里看到。(或者更直观地说，这里)

​

var parent1 = document.createElement('div'),
    parent2 = document.createElement('div'),
    child = document.createElement('div'),
    results = document.createElement('span');

  document.body.appendChild(results);
        
  parent1.appendChild(child);
  results.textContent += child.parentNode === parent1; //true
  parent2.appendChild(child);
  results.textContent += ', ' + (child.parentNode === parent1); //false

​