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

zhjx922 發布于2019-08-23 15:16 / 2646人閱讀

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

1、React元素

在宿主環境中，一個宿主實例是最小的單位（像DOM節點）。在React中最小的單位是React元素。
一個React元素就是一個描述宿主實例的Javascript對象。

// 用JSX語法糖對這個對象描述
//

一個React元素沒有宿主實例與它綁定，他只是描述你想在屏幕上看到的UI的描述，所以他是輕量級的。
就如同宿主實例，React也能實現樹結構：

// 用JSX語法糖對這些對象描述
// 
//   
{
  type: "dialog",
  props: {
    children: [{
      type: "button",
      props: { className: "blue" }
    }, {
      type: "button",
      props: { className: "red" }
    }]
  }
}

（提示：我忽視了一些對解釋這個概念并不重要的屬性）

但是，請記住React元素沒有一致性的標記。他們總是不斷的重建和銷毀。
React元素是不可變的。比如，你不能改變一個React元素的children屬性和其他屬性。如果你想渲染與之前不同的內容，你要重頭開始描述一個新的React元素。
我喜歡把React元素比做電影中的每一幀。它們描述了UI在某一刻的狀態，它們永遠不會改變。

2. 入口

每一個React渲染器都有一個入口。就是那個告訴React把特定的React元素樹渲染到宿主實例中的API。

ReactDOM.render(
  // { type: "button", props: { className: "blue" } }

當我們說ReactDOM.render(reactElement, domContainer)，就意味著：“親愛的React，將我的React元素放到domContainer 的宿主樹去”。
React會看著reactElement.type（在我們的例子中，‘button’）并告訴React Dom renderer 創造一個宿主實例并且設置屬性：

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 會在第一次渲染中遞歸地為它們創建宿主實例。

GPU云服務器云服務器 react _React React 源碼 react cdn

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

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

React as a UI Runtime(四、條件)

摘要：我們不想要因為重新創建元素而失去它的選中狀態，聚焦狀態和顯示內容。幸好這個問題有一個簡單的修復方式，他并不在應用中常見。那么會執行類似于下面的代碼的狀態并不會改變如果React在更新中只重用與元素類型相匹配的宿主實例，那按渲染條件選擇的內容怎么辦呢？正如下面的代碼，假如我們開始至需要一個input，但稍后需要在它之前渲染一個message ： // 第一次渲染 ReactDOM.re...

stonezhu 2019-08-23 15:22 評論0 收藏0
React as a UI Runtime(五、列表)

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

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

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

劉德剛 2019-08-23 15:19 評論0 收藏0
webpack實戰

摘要：和類似的預處理器還有等。的用處非常多，包括給自動加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會成為預處理器的最終贏家。 webpack實戰查看所有文檔頁面：全棧開發，獲取更多信息。快馬加鞭，加班加點，終于把這個文檔整理出來了，順便深入地學習一番，鞏固知識，就是太累人，影響睡眠時間和質量。極客就是想要把事情做到極致，開始了就必須到達終點。原文鏈接：webpack實戰，原...

cyrils 2019-08-22 17:32 評論0 收藏0
React 單文件組件的解決方案 Omil 和 Omi Snippets

摘要：屬性我們還可以使用來書寫樣式，它會自動幫我們編譯為格式內容語法高亮建議使用配合該擴展支持語法高亮擴展開發項目，當然你可以把文件當作對待。 Omil 是什么？ Omil是一個 webpack 的 loader，它允許你以一種名為單文件組件(SFCs)的格式撰寫 Omi 組件： ${this.data.title} export default class { test(){...

lowett 2019-08-26 10:10 評論0 收藏0