React as a UI Runtime(四、条件)

如果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的状态并不会改变