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)意味着React会将您的React Component作为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。每次调用render方法时，前一个DOM都被新创建的DOM替换。它只查找以前的DOM和新DOM之间的差异。这就是它呈现单个按钮的原因。

不止一次调用ReactDOM.render

2 个答案: