多次调用ReactDOM.render

Question

为什么下面只渲染一个按钮？

const b = <button>this is a button</button>; 
ReactDOM.render(b,mountNode) 
ReactDOM.render(b,mountNode) 
ReactDOM.render(b,mountNode) 

Answer 1

如果mountNode是一个DOM元素的引用，调用ReactDOM.render(b, mountNode)意味着阵营将插入你的阵营组件作为innerHTML来该节点。

有效地调用它几次意味着您只是不断更换先前安装的节点。

如果您需要3个按钮，请尝试创建一个包装它们的组件。例如：

var mountNode = document.getElementById("app"); 
 

 
const b = <button>this is a button</button>; 
 
const myApp = <div>{b}{b}{b}</div>; 
 

 
ReactDOM.render(myApp, mountNode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="app"></div>

或者：

var mountNode = document.getElementById("app"); 
 

 
const B =() => <button>this is a button</button>; 
 
const MyApp =() => <div><B /><B /><B /></div>; 
 

 
ReactDOM.render(<MyApp />, mountNode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

在反应它创建虚拟DOM。每次渲染方法被调用时，以前的DOM被新创建的DOM取代。它只查找以前的DOM和新的DOM之间的区别。这就是为什么它呈现单个按钮。