React as a UI Runtime(四、条件)

Reactが更新中に要素タイプに一致する宿主インスタンスのみを再利用した場合、レンダリング条件で選択した内容はどうなりますか?
下記のコードのように、もし私達が始まるなら、一つ必要です.inputですが、後でレンダリングする必要があります.message:

//      
ReactDOM.render(
  

    
  
,
  domContainer
);

//      
ReactDOM.render(
  

    
I was just added here!
    
  
,
  domContainer
);

この例では、のホスト・インスタンスが再構築される.Reactは元素ツリーを遍歴し、前のバージョンと比較します.

dialog→dialog:繰り返し使ってもいいですか?を選択します.

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 = 
I was just added here!
;
  }
  return (
    

      {message}
      
    
  );
}

This example doesn’t suffer from the problem we just described.It might easure to see why if we object notation instead of JSX.Look at the dialog child element:この例は私達が前に述べたような問題がないので、Jogを使って説明します.

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({show Message}{let Message=null;if(show Message){

message = {
  type: 'p',
  props: { children: 'I was just added here!' }
};

{return}{

type: 'dialog',
props: {
  children: [
    message,
    { type: 'input', props: {} }
  ]
}

}
show Messageがtrueであろうとfalseであろうと、は第二のサブ要素であり、renderではその位置は変わらない.show Messageがfalseからtrueに変更されると、Reactは元素ツリーを巡回し、以前のバージョンと比較される.

dialog→dialog:繰り返し使ってもいいですか?を選択します.

(null)→p:新しいp宿主の例を挿入する必要があります.

input→input:繰り返し使ってもいいですか?を選択します.

Reactは、以下のようなコードを実行します.

let inputNode = dialogNode.firstChild;
let pNode = document.createElement('p');
pNode.textContent = 'I was just added here!';
dialogNode.insertBefore(pNode, inputNode);

inputの状態は変わりません.