ReactDOM.renderを複数回呼び出す

Question

以下は、1つのボタンだけをレンダリングするのはなぜですか？

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

Answer 1

はmountNode場合は、そのノードにinnerHTMLプロパティとしてコンポーネントを反応させるのあなたを挿入しますリアクトReactDOM.render(b, mountNode)手段を呼び出し、DOM要素への参照です。

効果的に数回呼び出すと、以前にマウントされたノードを置き換えておくだけで済みます。

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の違いだけを探します。だから、それは単一のボタンをレンダリングする理由です。