資訊專欄INFORMATION COLUMN
摘要：元素在宿主環(huán)境中，一個(gè)宿主實(shí)例是最小的單位像節(jié)點(diǎn)。在中最小的單位是元素。他們總是不斷的重建和銷毀。元素是不可變的。比如，你不能改變一個(gè)元素的屬性和其他屬性。入口每一個(gè)渲染器都有一個(gè)入口。當(dāng)我們說(shuō)，就意味著親愛的，將我的元素放到的宿主樹去。
1、React元素
在宿主環(huán)境中，一個(gè)宿主實(shí)例是最小的單位（像DOM節(jié)點(diǎn)）。在React中最小的單位是React元素。
一個(gè)React元素就是一個(gè)描述宿主實(shí)例的Javascript對(duì)象。
// 用JSX語(yǔ)法糖對(duì)這個(gè)對(duì)象描述
//
{
type: "button",
props: { className: "blue" }
}
一個(gè)React元素沒有宿主實(shí)例與它綁定，他只是描述你想在屏幕上看到的UI的描述，所以他是輕量級(jí)的。
就如同宿主實(shí)例，React也能實(shí)現(xiàn)樹結(jié)構(gòu)：
// 用JSX語(yǔ)法糖對(duì)這些對(duì)象描述
//
{
type: "dialog",
props: {
children: [{
type: "button",
props: { className: "blue" }
}, {
type: "button",
props: { className: "red" }
}]
}
}
（提示：我忽視了一些對(duì)解釋這個(gè)概念并不重要的屬性）
但是，請(qǐng)記住React元素沒有一致性的標(biāo)記。他們總是不斷的重建和銷毀。
React元素是不可變的。比如，你不能改變一個(gè)React元素的children屬性和其他屬性。如果你想渲染與之前不同的內(nèi)容，你要重頭開始描述一個(gè)新的React元素。
我喜歡把React元素比做電影中的每一幀。它們描述了UI在某一刻的狀態(tài)，它們永遠(yuǎn)不會(huì)改變。
每一個(gè)React渲染器都有一個(gè)入口。就是那個(gè)告訴React把特定的React元素樹渲染到宿主實(shí)例中的API。
ReactDOM.render(
// { type: "button", props: { className: "blue" } }
,
document.getElementById("container")
);
當(dāng)我們說(shuō)ReactDOM.render(reactElement, domContainer)，就意味著：“親愛的React，將我的React元素放到domContainer 的宿主樹去”。
React會(huì)看著reactElement.type（在我們的例子中，‘button’）并告訴React Dom renderer 創(chuàng)造一個(gè)宿主實(shí)例并且設(shè)置屬性：
function createHostInstance(reactElement) {
let domNode = document.createElement(reactElement.type);
domNode.className = reactElement.props.className;
return domNode;
}
在我們的例子中，代碼如下
let domNode = document.createElement("button");
domNode.className = "blue";
domContainer.appendChild(domNode);
如果 React 元素在 reactElement.props.children 中含有子元素，React 會(huì)在第一次渲染中遞歸地為它們創(chuàng)建宿主實(shí)例。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101788.html
摘要：我們不想要因?yàn)橹匦聞?chuàng)建元素而失去它的選中狀態(tài)，聚焦?fàn)顟B(tài)和顯示內(nèi)容。幸好這個(gè)問(wèn)題有一個(gè)簡(jiǎn)單的修復(fù)方式，他并不在應(yīng)用中常見。那么會(huì)執(zhí)行類似于下面的代碼的狀態(tài)并不會(huì)改變 如果React在更新中只重用與元素類型相匹配的宿主實(shí)例，那按渲染條件選擇的內(nèi)容怎么辦呢？正如下面的代碼，假如我們開始至需要一個(gè)input，但稍后需要在它之前渲染一個(gè)message ： // 第一次渲染 ReactDOM.re...
摘要：但是這只在子元素的位置是靜止的并且不需要重排。這可能會(huì)引起性能問(wèn)題和可能的。當(dāng)在中發(fā)現(xiàn)，它就會(huì)檢查之前版本中的是否同樣含有。并沒有慣用的支持對(duì)在不重新創(chuàng)建元素的情況下讓宿主實(shí)例在不同的父元素之間移動(dòng)。 通過(guò)比較樹中的元素是否在同一位置，通常已經(jīng)足夠判斷是否是重用還是再次創(chuàng)建通信組件了。但是這只在子元素的位置是靜止的并且不需要重排。在我們的上述的例子中，即使message不存在，我們?nèi)匀?..
摘要：確定宿主樹怎么樣來(lái)響應(yīng)新的信息的這個(gè)過(guò)程被稱為協(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) ...
摘要：和類似的預(yù)處理器還有等。的用處非常多，包括給自動(dòng)加前綴使用下一代語(yǔ)法等，目前越來(lái)越多的人開始用它，它很可能會(huì)成為預(yù)處理器的最終贏家。 webpack實(shí)戰(zhàn) 查看所有文檔頁(yè)面：全棧開發(fā)，獲取更多信息?？祚R加鞭，加班加點(diǎn)，終于把這個(gè)文檔整理出來(lái)了，順便深入地學(xué)習(xí)一番，鞏固知識(shí)，就是太累人，影響睡眠時(shí)間和質(zhì)量。極客就是想要把事情做到極致，開始了就必須到達(dá)終點(diǎn)。 原文鏈接：webpack實(shí)戰(zhàn)，原...
摘要：屬性我們還可以使用來(lái)書寫樣式，它會(huì)自動(dòng)幫我們編譯為格式內(nèi)容語(yǔ)法高亮建議使用配合該擴(kuò)展支持語(yǔ)法高亮擴(kuò)展開發(fā)項(xiàng)目，當(dāng)然你可以把文件當(dāng)作對(duì)待。 Omil 是什么？ Omil是一個(gè) webpack 的 loader，它允許你以一種名為單文件組件(SFCs)的格式撰寫 Omi 組件： ${this.data.title} export default class { test(){...
閱讀 3214·2021-11-10 11:36
閱讀 3160·2021-11-02 14:39
閱讀 1744·2021-09-26 10:11
閱讀 4987·2021-09-22 15:57
閱讀 1701·2021-09-09 11:36
閱讀 2061·2019-08-30 12:56
閱讀 3502·2019-08-30 11:17
閱讀 1709·2019-08-29 17:17
