共计 1948 个字符，预计需要花费 5 分钟才能阅读完成。
如果 React 在更新中只重用与元素类型相匹配的宿主实例，那按渲染条件选择的内容怎么办呢？正如下面的代码，假如我们开始至需要一个 input，但稍后需要在它之前渲染一个 message：
// 第一次渲染
ReactDOM.render(
<dialog>
<input />
</dialog>,
domContainer
);
// 第二次渲染
ReactDOM.render(
<dialog>
<p>I was just added here!</p>
<input />
</dialog>,
domContainer
);
在这个例子中，<input> 宿主实例将会被重建。React 会遍历元素树，并与之前的版本比较：
dialog → dialog: 可以重复使用吗? 可以 -type 匹配。
input → p：可以重复使用吗? 不行，type 已经改变了！需要删除存在的 input，并创建新的 p 宿主实例。
(nothing) → input: 需要新建一个 input 宿主实例。
React 这样的代码是如下的：
let oldInputNode = dialogNode.firstChild;
dialogNode.removeChild(oldInputNode);
let pNode = document.createElement(‘p’);
pNode.textContent = ‘I was just added here!’;
dialogNode.appendChild(pNode);
let newInputNode = document.createElement(‘input’);
dialogNode.appendChild(newInputNode);
这不是一种好的更新方式，因为原则上 input 并没有被 p 替代 - 它仅仅是移动了。我们不想要因为重新创建 Dom 元素而失去它的选中状态，聚焦状态和显示内容。幸好这个问题有一个简单的修复方式，他并不在 React 应用中常见。在实践中，你很少会直接调用 ReactDOM.render，实际上，React app 常常会拆分成像下面这样的函数：
function Form({showMessage}) {
let message = null;
if (showMessage) {
message = <p>I was just added here!</p>;
}
return (
<dialog>
{message}
<input />
</dialog>
);
}
This example doesn’t suffer from the problem we just described. It might be easier to see why if we use object notation instead of JSX. Look at the dialog child element tree: 这个例子并不会有我们之前描述的那个问题，如果我们使用对象来代替 JSX 描述会更加明显，下面是 dialog 子元素树：
function Form({showMessage}) {
let message = null;
if (showMessage) {
message = {
type: ‘p’,
props: {children: ‘I was just added here!’}
};
}
return {
type: ‘dialog’,
props: {
children: [
message,
{type: ‘input’, props: {} }
]
}
};
}
function Form({showMessage}) {let message = null; if (showMessage) {
message = {
type: ‘p’,
props: {children: ‘I was just added here!’}
};
} return {
type: ‘dialog’,
props: {
children: [
message,
{type: ‘input’, props: {} }
]
}
};}
不管 showMessage 是 true 的还是 false，<input> 是第二个子元素，并且在 render 中不会改变它的位置。如果 showMessage 从 false 变为 true，React 会遍历元素树，并与之前的版本相比较：
dialog → dialog: 可以重复使用吗? 可以 -type 匹配。
(null) → p: 需要插入一个新的 p 宿主实例。
input → input: 可以重复使用吗? 可以 -type 匹配。
那么 React 会执行类似于下面的代码：
let inputNode = dialogNode.firstChild;
let pNode = document.createElement(‘p’);
pNode.textContent = ‘I was just added here!’;
dialogNode.insertBefore(pNode, inputNode);
input 的状态并不会改变