React as a UI Runtime(四、條件)

stonezhu 發(fā)布于2019-08-23 15:22 / 3165人閱讀

摘要：我們不想要因為重新創(chuàng)建元素而失去它的選中狀態(tài)，聚焦狀態(tài)和顯示內容。幸好這個問題有一個簡單的修復方式，他并不在應用中常見。那么會執(zhí)行類似于下面的代碼的狀態(tài)并不會改變

如果React在更新中只重用與元素類型相匹配的宿主實例，那按渲染條件選擇的內容怎么辦呢？
正如下面的代碼，假如我們開始至需要一個input，但稍后需要在它之前渲染一個message ：

// 第一次渲染
ReactDOM.render(
  
    
  ,
  domContainer
);

// 第二次渲染
ReactDOM.render(
  
    I was just added here!
    
  ,
  domContainer
);

在這個例子中，宿主實例將會被重建。React會遍歷元素樹，并與之前的版本比較：

dialog → dialog: 可以重復使用嗎? 可以-type匹配。

input → p：可以重復使用嗎?不行，type已經(jīng)改變了！需要刪除存在的input，并創(chuàng)建新的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替代-它僅僅是移動了。我們不想要因為重新創(chuàng)建Dom元素而失去它的選中狀態(tài)，聚焦狀態(tài)和顯示內容。
幸好這個問題有一個簡單的修復方式，他并不在React應用中常見。
在實踐中，你很少會直接調用ReactDOM.render，實際上，React app常常會拆分成像下面這樣的函數(shù)：

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 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，是第二個子元素，并且在render中不會改變它的位置。
如果showMessage 從false變?yōu)閠rue，React會遍歷元素樹，并與之前的版本相比較：

dialog → dialog:可以重復使用嗎? 可以-type匹配。

(null) → p:需要插入一個新的p宿主實例。

input → input: 可以重復使用嗎? 可以-type匹配。

那么React會執(zhí)行類似于下面的代碼：

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

input的狀態(tài)并不會改變

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101937.html

React as a UI Runtime(二、React元素和入口)

摘要：元素在宿主環(huán)境中，一個宿主實例是最小的單位像節(jié)點。在中最小的單位是元素。他們總是不斷的重建和銷毀。元素是不可變的。比如，你不能改變一個元素的屬性和其他屬性。入口每一個渲染器都有一個入口。當我們說，就意味著親愛的，將我的元素放到的宿主樹去。 1、React元素在宿主環(huán)境中，一個宿主實例是最小的單位（像DOM節(jié)點）。在React中最小的單位是React元素。一個React元素就是一個描述...

zhjx922 2019-08-23 15:16 評論0 收藏0
React as a UI Runtime(三、協(xié)調)

摘要：確定宿主樹怎么樣來響應新的信息的這個過程被稱為協(xié)調。協(xié)調有兩種方法。我們已經(jīng)創(chuàng)建了一個作為第一個也是唯一一個子元素，并且我們希望在同一個地方再次渲染一個。這個已經(jīng)與的思想非常接近了。 1.協(xié)調如果我們在同一個容器中使用兩次ReactDOM.render()會發(fā)生什么？ ReactDOM.render( , document.getElementById(container) ...

劉德剛 2019-08-23 15:19 評論0 收藏0
React as a UI Runtime(五、列表)

摘要：但是這只在子元素的位置是靜止的并且不需要重排。這可能會引起性能問題和可能的。當在中發(fā)現(xiàn)，它就會檢查之前版本中的是否同樣含有。并沒有慣用的支持對在不重新創(chuàng)建元素的情況下讓宿主實例在不同的父元素之間移動。通過比較樹中的元素是否在同一位置，通常已經(jīng)足夠判斷是否是重用還是再次創(chuàng)建通信組件了。但是這只在子元素的位置是靜止的并且不需要重排。在我們的上述的例子中，即使message不存在，我們仍然...

CoyPan 2019-08-23 15:23 評論0 收藏0
React Native Vs. Xamarin Vs. Ionic Vs. Flutter

React Native Vs. Xamarin Vs. Ionic Vs. Flutter:Which Is Best For Cross-Platform Mobile App Development? While developing Native Mobile Apps, Android apps are written in Java, and iOS ones in Swift and...

Clect 2019-08-23 15:11 評論0 收藏0