資訊專欄INFORMATION COLUMN
摘要：我們不想要因?yàn)橹匦聞?chuàng)建元素而失去它的選中狀態(tài)，聚焦?fàn)顟B(tài)和顯示內(nèi)容。幸好這個(gè)問題有一個(gè)簡(jiǎn)單的修復(fù)方式，他并不在應(yīng)用中常見。那么會(huì)執(zhí)行類似于下面的代碼的狀態(tài)并不會(huì)改變
如果React在更新中只重用與元素類型相匹配的宿主實(shí)例，那按渲染條件選擇的內(nèi)容怎么辦呢？
正如下面的代碼，假如我們開始至需要一個(gè)input，但稍后需要在它之前渲染一個(gè)message ：
// 第一次渲染 ReactDOM.render( , domContainer ); // 第二次渲染 ReactDOM.render( , domContainer );
在這個(gè)例子中，宿主實(shí)例將會(huì)被重建。React會(huì)遍歷元素樹，并與之前的版本比較：
dialog → dialog: 可以重復(fù)使用嗎? 可以-type匹配。
input → p：可以重復(fù)使用嗎?不行，type已經(jīng)改變了！需要?jiǎng)h除存在的input，并創(chuàng)建新的p宿主實(shí)例。
(nothing) → input: 需要新建一個(gè)input宿主實(shí)例。
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);
這不是一種好的更新方式，因?yàn)樵瓌t上input并沒有被p替代-它僅僅是移動(dòng)了。我們不想要因?yàn)橹匦聞?chuàng)建Dom元素而失去它的選中狀態(tài)，聚焦?fàn)顟B(tài)和顯示內(nèi)容。
幸好這個(gè)問題有一個(gè)簡(jiǎn)單的修復(fù)方式，他并不在React應(yīng)用中常見。
在實(shí)踐中，你很少會(huì)直接調(diào)用ReactDOM.render，實(shí)際上，React app常常會(huì)拆分成像下面這樣的函數(shù)：
function Form({ showMessage }) {
let message = null;
if (showMessage) {
message = I was just added here!
;
}
return (
);
}
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:
這個(gè)例子并不會(huì)有我們之前描述的那個(gè)問題，如果我們使用對(duì)象來代替JSX描述會(huì)更加明顯，下面是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，是第二個(gè)子元素，并且在render中不會(huì)改變它的位置。
如果showMessage 從false變?yōu)閠rue，React會(huì)遍歷元素樹，并與之前的版本相比較：
dialog → dialog:可以重復(fù)使用嗎? 可以-type匹配。
(null) → p:需要插入一個(gè)新的p宿主實(shí)例。
input → input: 可以重復(fù)使用嗎? 可以-type匹配。
那么React會(huì)執(zhí)行類似于下面的代碼：
let inputNode = dialogNode.firstChild;
let pNode = document.createElement("p");
pNode.textContent = "I was just added here!";
dialogNode.insertBefore(pNode, inputNode);
input的狀態(tài)并不會(huì)改變
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101937.html
摘要：元素在宿主環(huán)境中，一個(gè)宿主實(shí)例是最小的單位像節(jié)點(diǎn)。在中最小的單位是元素。他們總是不斷的重建和銷毀。元素是不可變的。比如，你不能改變一個(gè)元素的屬性和其他屬性。入口每一個(gè)渲染器都有一個(gè)入口。當(dāng)我們說，就意味著親愛的，將我的元素放到的宿主樹去。 1、React元素 在宿主環(huán)境中，一個(gè)宿主實(shí)例是最小的單位（像DOM節(jié)點(diǎn)）。在React中最小的單位是React元素。一個(gè)React元素就是一個(gè)描述...
摘要：確定宿主樹怎么樣來響應(yīng)新的信息的這個(gè)過程被稱為協(xié)調(diào)。協(xié)調(diào)有兩種方法。我們已經(jīng)創(chuàng)建了一個(gè)作為第一個(gè)也是唯一一個(gè)子元素，并且我們希望在同一個(gè)地方再次渲染一個(gè)。這個(gè)已經(jīng)與的思想非常接近了。 1.協(xié)調(diào) 如果我們?cè)谕粋€(gè)容器中使用兩次ReactDOM.render()會(huì)發(fā)生什么？ ReactDOM.render( , document.getElementById(container) ...
摘要：但是這只在子元素的位置是靜止的并且不需要重排。這可能會(huì)引起性能問題和可能的。當(dāng)在中發(fā)現(xiàn)，它就會(huì)檢查之前版本中的是否同樣含有。并沒有慣用的支持對(duì)在不重新創(chuàng)建元素的情況下讓宿主實(shí)例在不同的父元素之間移動(dòng)。 通過比較樹中的元素是否在同一位置，通常已經(jīng)足夠判斷是否是重用還是再次創(chuàng)建通信組件了。但是這只在子元素的位置是靜止的并且不需要重排。在我們的上述的例子中，即使message不存在，我們?nèi)匀?..
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...
閱讀 1272·2021-11-23 09:51
閱讀 2663·2021-09-03 10:47
閱讀 2244·2019-08-30 15:53
閱讀 2430·2019-08-30 15:44
閱讀 1383·2019-08-30 15:44
閱讀 1207·2019-08-30 10:57
閱讀 1936·2019-08-29 12:25
閱讀 1098·2019-08-26 11:57
