1.jsX理解

舉例：

const element = <h1>Hello, world!</h1>;

這被稱為jsX，是一個JavaScript的語法擴充套件。建議在react中配合使用 JSX，JSX 可以生成react“元素”，而且JSX 可以很好地描述 UI 應該呈現出它應有互動的本質形式。JSX 可能會使人聯想到模版語言，但它具有JavaScript的全部功能。

為什麼用JSX?

React 認為渲染邏輯本質上與其他 UI 邏輯內在耦合，比如，在 UI 中需要繫結處理事件、在某些時刻狀態發生變化時需要通知到 UI，以及需要在 UI 中展示準備好的資料。

React 並沒有採用將標記與邏輯進行分離到不同檔案

React不強制要求使用 JSX，但是大多數人發現，在 JavaScript程式碼中將 JSX 和 UI 放在一起時，會在視覺上有輔助作用。它還可以使 React 顯示更多有用的錯誤和警告訊息。

在 JSX 中嵌入表示式

下面的例子聲明瞭一個名為name的變數，然後在 JSX 中使用它，並將它包裹在大括號中：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);
 

在 JSX語法中，你可以在大括號內放置任何有效的JavaScript 表示式。例如，2 + 2，user.firstName或formatName(user)都是有效的 JavaScript 表示式。

下面的示例呼叫 JavaScript函式formatName(user)的結果，並將結果嵌入到<h1>元素中。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);
 

JSX 也是一個表示式

在編譯之後，JSX 表示式會被轉為普通 JavaScript函式呼叫，並且對其取值後得到 JavaScript 物件。也就是說，你可以在if語句和for迴圈的程式碼塊中使用 JSX，將 JSX 賦值給變數，把 JSX 當作引數傳入，以及從函式中返回 JSX。示例如下：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 具有特定屬性

可以通過使用引號，來將屬性值指定為字串字面量：

const element = <div tabIndex="0"></div>;

也可以使用大括號，來在屬性值中插入一個 JavaScript 表示式：

const element = <img src={user.avatarUrl}></img>;

在屬性中嵌入 JavaScript 表示式時，不要在大括號外面加上引號。應該僅使用引號（對於字串值）或大括號（對於表示式）中的一個，對於同一屬性不能同時使用這兩種符號。

注意：

因為 JSX 語法上更接近 JavaScript 而不是html，所以 React DOM 使用camelCase（小駝峰命名）來定義屬性的名稱，而不使用html屬性名稱的命名約定。

例如，JSX 裡的class變成了className，而tabindex則變為tabIndex。

使用 JSX 指定子元素

假如一個標籤裡面沒有內容，你可以使用/>來閉合標籤，就像 XML 語法一樣：

const element = <img src={user.avatarUrl} />;

JSX 標籤裡能夠包含很多子元素:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 表示物件

Babel 會把 JSX 轉譯成一個名為React.createElement()函式呼叫。以下兩種示例程式碼完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()會預先執行一些檢查，以幫助你編寫無錯程式碼，但實際上它建立了一個這樣的物件：

// 注意：這是簡化過的結構
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

這些物件被稱為 “React 元素”。它們描述了你希望在螢幕上看到的內容。React 通過讀取這些物件，然後使用它們來構建 DOM 以及保持隨時更新。

注意：元素是構成react應用的最小磚塊。

接下來介紹將 React 元素渲染為 DOM。

2.虛擬DOM

什麼是虛擬DOM?

在 React 中，render 執行的結果得到的並不是真正的 DOM 節點，結果僅僅是輕量級的 JavaScript 物件，我們稱之為 virtual DOM。

虛擬 DOM 是 React 的一大亮點，具有 batching(批處理) 和高效的 Diff 演算法。這讓我們可以無需擔心效能問題而” 毫無顧忌” 的隨時“ 重新整理” 整個頁面，由虛擬 DOM 來確保只對介面上真正變化的部分進行實際的 DOM 操作。在實際開發中基本無需關心虛擬 DOM 是如何運作的，但是理解其執行機制不僅有助於更好的理解 React 元件的生命週期，而且對於進一步優化 React 程式也會有很大幫助。

與瀏覽器的 DOM 元素不同，React 元素是建立開銷極小的普通物件。React DOM 會負責更新 DOM 來與 React 元素保持一致。

(個人理解：虛擬DOM是由javascript構建的文件樹，而真實的DOM是由HTML繪製的文件樹。傳統的頁面發生改變時，會引起DOM頁面的重繪，降低效率。而在react中，當內容發生改變時，會觸發對應javascript控制的樹節點物件的改變，從而控制區域性頁面元素的重新整理。更通俗的比較就是：傳統的頁面渲染是內容變化觸發頁面DOM的整體重新整理，而react則是內容變化觸發javacript虛擬DOM物件改變，進而控制頁面DOM區域性重新整理)

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

將一個元素渲染為 DOM

假設你的 HTML 檔案某處有一個<div>：

<div id="root"></div>

其被稱為“根” DOM 節點，因為該節點內的所有內容都將由 React DOM 管理。

僅使用 React 構建的應用通常只有單一的根 DOM 節點。如果你在將 React 整合進一個已有應用，那麼你可以在應用中包含任意多的獨立根 DOM 節點。

如果想要將一個 React 元素渲染到根 DOM 節點中，只需把它們一起傳入ReactDOM.render()：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

更新已渲染的元素

React 元素是不可變物件。一旦被建立，你就無法更改它的子元素或者屬性。一個元素就像電影的單幀：它代表了某個特定時刻的 UI。

根據我們已有的知識，更新 UI 唯一的方式是建立一個全新的元素，並將其傳入ReactDOM.render()。

注意：在實踐中，大多數 React 應用只會呼叫一次ReactDOM.render()

React 只更新它需要更新的部分

React DOM 會將元素和它的子元素與它們之前的狀態進行比較，並只會進行必要的更新來使 DOM 達到預期的狀態。