多次調用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之間的區別。這就是爲什麼它呈現單個按鈕。