資訊專欄INFORMATION COLUMN
摘要：確定宿主樹怎么樣來響應新的信息的這個過程被稱為協調。協調有兩種方法。我們已經創建了一個作為第一個也是唯一一個子元素，并且我們希望在同一個地方再次渲染一個。這個已經與的思想非常接近了。
1.協調
如果我們在同一個容器中使用兩次ReactDOM.render()會發生什么？
ReactDOM.render(
,
document.getElementById("container")
);
// ... later ...
// 應該替換掉 button 宿主實例嗎？
// 還是在已有的 button 上更新屬性？
ReactDOM.render(
,
document.getElementById("container")
);
再次說明，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的元素可能一直在變化，那理論上那時候引用同一個宿主實例呢？
在我們的例子上是很簡單的。我們已經創建了一個作為第一個（也是唯一一個）子元素，并且我們希望在同一個地方再次渲染一個。我們已經有一個的宿主實例，我們就不需要再創建新的，再次使用它就好了。
這個已經與React的思想非常接近了。
如果元素的種類在樹的同一個地方之前一次的渲染和接下來的渲染是相同的，React會再次使用已經存在的宿主實例。
下面是React帶有備注的大致實現過程：
// let domNode = document.createElement("button");
// domNode.className = "blue";
// domContainer.appendChild(domNode);
ReactDOM.render(
,
document.getElementById("container")
);
// 可以再次使用嗎? Yes! (button → button)
// domNode.className = "red";
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")
);
這套規則對子樹也同樣適用。例如，當我們在更新有兩個子組件時的，React首先決定是否重用，
然后再對每一個子組件進行相同的過程。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101876.html
摘要：元素在宿主環境中，一個宿主實例是最小的單位像節點。在中最小的單位是元素。他們總是不斷的重建和銷毀。元素是不可變的。比如，你不能改變一個元素的屬性和其他屬性。入口每一個渲染器都有一個入口。當我們說，就意味著親愛的，將我的元素放到的宿主樹去。 1、React元素 在宿主環境中，一個宿主實例是最小的單位（像DOM節點）。在React中最小的單位是React元素。一個React元素就是一個描述...
摘要：但是這只在子元素的位置是靜止的并且不需要重排。這可能會引起性能問題和可能的。當在中發現，它就會檢查之前版本中的是否同樣含有。并沒有慣用的支持對在不重新創建元素的情況下讓宿主實例在不同的父元素之間移動。 通過比較樹中的元素是否在同一位置，通常已經足夠判斷是否是重用還是再次創建通信組件了。但是這只在子元素的位置是靜止的并且不需要重排。在我們的上述的例子中，即使message不存在，我們仍然...
摘要：我們不想要因為重新創建元素而失去它的選中狀態，聚焦狀態和顯示內容。幸好這個問題有一個簡單的修復方式，他并不在應用中常見。那么會執行類似于下面的代碼的狀態并不會改變 如果React在更新中只重用與元素類型相匹配的宿主實例，那按渲染條件選擇的內容怎么辦呢？正如下面的代碼，假如我們開始至需要一個input，但稍后需要在它之前渲染一個message ： // 第一次渲染 ReactDOM.re...
摘要：基礎的理論概念這篇文章是我的一次嘗試，希望能夠形式化的介紹關于本身的一些理念模型。我對于此實際的理念模型是在每次的更新過程中返回下一個階段的狀態。的目標是提升對在動畫，布局以及手勢方面的友好度。我已經邀請了團隊的成員來對本文檔的準確性進行。 前言 本文主要是對收集到的一些官方或者其他平臺的文章進行翻譯，中間可能穿插一些個人的理解，如有錯誤疏漏之處，還望批評指正。筆者并未研究過源碼，只是...
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...
閱讀 1229·2021-11-15 11:37
閱讀 2246·2021-09-30 09:55
閱讀 4483·2021-09-22 15:51
閱讀 3741·2021-09-22 15:46
閱讀 2766·2019-08-30 15:52
閱讀 423·2019-08-29 16:20
閱讀 2889·2019-08-29 15:12
閱讀 1130·2019-08-26 18:27
