React入門-JSX和虛擬dom_ZenDei技術網路在線

1.JSX理解舉例：這被稱為 JSX，是一個 JavaScript 的語法擴展。建議在 React 中配合使用 JSX，JSX 可以生成 React “元素”，而且JSX 可以很好地描述 UI 應該呈現出它應有交互的本質形式。JSX 可能會使人聯想到模版語言，但它具有 JavaScript 的全 ...

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局部刷新)

將一個元素渲染為 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 達到預期的狀態。

react中文文檔：https://zh-hans.reactjs.org/docs/hello-world.html

react開發者工具：https://github.com/facebook/react-devtools

react小型表單庫：https://jaredpalmer.com/formik/docs/overview

javascript高階知識:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

線上編寫react練習：https://codepen.io/pen/?&editable=true

！以上是學習react可能會用到的知識文檔，學習一門新技術的最好途徑就是閱讀官方文檔+實際動手操作