React入門-JSX和虛擬dom

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可能會用到的知識文檔，學習一門新技術的最好途徑就是閱讀官方文檔+實際動手操做