React as a UI Runtime(三、協調)

2517 ワード

javascript runtime ui

1.協調
もし私達が同じ容器の中で二回ReactDOM.render()を使うと何が発生しますか?

ReactDOM.render(

再次说明，React的工作是使宿主树和提供的React元素的树一致。确定宿主树怎么样来响应新的信息的这个过程被称为协调。
协调有两种方法。React的简单的版本是抛弃已经存在的树，重新建立新的树：

let domContainer = document.getElementById('container');
//    
domContainer.innerHTML = '';
//        
let domNode = document.createElement('button');
domNode.className = 'red';
domContainer.appendChild(domNode);

しかしDOMでは,これは非効率であり,集束状態,選択状態,転がり状態などの重要な情報が失われる.だから私達はReactが次のように働きたいです.

let domNode = domContainer.firstChild;
// Update existing host instance
domNode.className = 'red';

言い換えれば、Reactは、既存の宿主インスタンスを更新して新しいReact要素に応答する必要があるときに、新しい宿主インスタンスを作成する必要があることを決定する必要がある.これは別れに関する問題を提出しました.Reactの要素はずっと変化しているかもしれません.理論的にはその時に同じ宿主の実例を引用しますか?私たちの例では簡単です.私たちは第一のサブ要素としてを作成しました.また、同じ場所で 142 142 142 142を再度レンダリングしたいです. の宿主例があります.私たちはもう新しいものを作る必要がないので、もう一回使えばいいです.
これはもうReactの思想に非常に近い.要素の種類がツリーの同じ場所で前回のレンダリングと次のレンダリングが同じであれば、Reactは既に存在している宿主インスタンスを再び使用する.以下はReactが備考を持っている大まかな実現過程です.

// let domNode = document.createElement('button');
// domNode.className = 'blue';
// domContainer.appendChild(domNode);
ReactDOM.render(

,
  document.getElementById('container')
);

//        ? No! (button → p)
// domContainer.removeChild(domNode);
// domNode = document.createElement('p');
// domNode.textContent = 'Hello';
// domContainer.appendChild(domNode);
ReactDOM.render(
  Hello,
  document.getElementById('container')
);

//        ? Yes! (p → p)
// domNode.textContent = 'Goodbye';
ReactDOM.render(
  Goodbye,
  document.getElementById('container')
);

この規則はサブツリーにも適用されます.例えば、のサブコンポーネントが2つ更新されたときのは、Reactが最初にを再利用するかどうかを決定し、その後、各サブコンポーネントについて同じプロセスを行う.

SublimeText 3中国語入力