【02】react 之 jsx

標籤：轉換   put   技術   hang   首字母   文法糖   動態   xtran   等價   

React與ReactDOM是react中核心對象，React為核心功能，ReactDOM提供對DOM的操作，以前的老版本中只有React沒有ReactDOM,新版本中分離出ReactDOM提供兩種渲染方式：瀏覽器渲染（react-dom.js）和伺服器渲染（react-dom-server.js）。

所以程式使用react，首先先引入：

var React = require(‘react‘);var ReactDOM = require(‘react-dom‘);

ES6(ES2015)

import React from ‘react‘;import ReactDOM from ‘react-dom‘;

React 的最基本方法，用於將element(HTML片段)，插入指定的 DOM 節點。

ReactDOM.render(element,targetDOM);

1.1.  JSX是什麼

 什麼是JSX，JS中HTML標籤部分就是一個JSX。 <h1>hello react</h1>.

 JSX 是 Facebook 團隊提出的一個文法方案，可以在 JavaScript 的代碼直接中使用 HTML 標籤來編寫 JavaScript 對象。其使用的是 XML-like 文法，這種文法方案需要通過 JSXTransformer(已經廢棄，目前使用babel) 來進行編譯轉換成真實可用的 JavaScript 代碼。

React 是基於組件的開發思想，React 認為一個組件可以是一個完全獨立的沒有任何其他依賴的模組檔案。一個組件中可以有自己的樣式（Inline Style）和結構（JSX編寫的HTML）。

1.2.  JSX由來

在 React 和 JSX 之前，一個組件如果要包含 HTML 結構將面臨如下幾個問題：JSX 很好的解決了這些問題

    1. 組件的 HTML 直接寫在頁面中，那麼組件的結構(html模板)和行為（js功能）是分離的；

    2. 組件的 HTML 直接用字串的形勢插入到 JavaScript 代碼中，那麼就會出現一大段的字串拼接，開發人員需要很小心的確保字串拼接時沒有因為少了一個符號而導致整個代碼無法運行；

    3. 使用 MVC 分層的思想，引入模板引擎，那麼該如何引入模板檔案的片段呢；

1.3.  JSX是可選的

JSX看似高大上，但是JSX本身是無法直接運行在JavaScript引擎中，因為JavaScript壓根中就沒有JSX技術。所以想要JSX運行，就編譯成JavaScript能夠執行的代碼。

JSX文法編寫:

var React = reqiure(‘react‘);var ReactDOM = reqiure(‘react-dom);var el = <a href="www.baidu.com">點我</a>ReactDOM.render(el,document.getElementById(‘app‘));

JavaScript編寫：

var React = require(‘react‘);var ReactDOM = require(‘react-dom‘);
//React.createElement 來構造組件的 DOM 樹。第一個參數是標籤名，第二個參數是屬性對象，第三個參數是子項目。var el = React.createElement(‘a‘,{href:‘www.baidu.com‘},‘點我‘,‘a‘);ReactDOM.render(el,document.getElementById(‘app‘));

以上兩種寫法，完全等價，因為webpack會使用babel把JSX編譯成JavaScript代碼。

使用babel index.js 可以查看最終啟動並執行代碼。

 

1.4.  JSX與HTML差異

JSX 與 HTML 的差異

 1、渲染HTML標籤，聲明變數採用 首字母小寫

     div / input / button

 2、渲染React組件，聲明變數採用 首字母大寫

MyButton  MyDataList

React 的 JSX 使用大寫和小寫字母來區分本地的組件類和 HTML 標籤.

3、 class 和 for 這兩個屬性，JSX文法最終是要被轉換為純Javascript的，所以要和在Javascript DOM中一樣，用 className 和 htmlFor 。

 1.5.  JSX運算式

JSX文法中寫Javascript運算式只需要用 {} 即可，可以使用{}運算式動態插入值。

SX文法，像是在Javascript代碼裡直接寫XML的文法，實質上這隻是一個文法糖，每一個XML標籤都會被JSX轉換工具轉換成純Javascript代碼，React 官方推薦使用JSX

普通取值

var url = "www.baidu.com";var el = <a href="{url}">點我</a>

三目運算 （不能使用if）

<div className="2>1?‘class2‘:‘class1‘"></div>

建立HTML標準內的元素時，JSX轉化器會丟棄那些非標準的屬性，如果一定要添加自訂屬性，那麼需要在這些自訂屬性之前添加 data- 首碼。

<div data-custom-attribute=‘foo‘>自訂屬性使用data開頭</div>

屬性延伸

var props = {"name":"username","type":"text"};var input = <input {...props}  value="value值"/>// 等效於<input name=’username’ type=’text’ value=’

value值

’>

樣式屬性：JSX把style當成對象來處理，所以style不能直接寫成style=’color:red,background-color:yellow’

var styles = {color:‘red‘,backgroundColor:‘yellow‘};var div = <div style={styles}>一個div</div>
var div = <div style={{color:‘red‘,backgroundColor:‘yellow‘}}>一個div</div>//注意是兩個{{}}，外括弧為運算式，內花括弧為json對象。

1.6.  JSX注意點

1、使用JSX的JS檔案，一般命名為JSX或者JS。

 2、JSX元素必須要用一個tag 包裹起來

var view = <div>第一個</div><div>第二個</div>; //錯誤的，必須被一個包裹。var view=<div><div>第一個</div><div>第二個</div></div>//正確。

3、JSX方式建立出來對象，並不是一個HTML中DOM，而是一個虛擬DOM。

React.createElement() 與 document.createElement(); 建立出來的對象，是兩種截然不同的對象。

4、React的普通標籤的事件名，採用on+事件名，click及為onClick, change為onChange。

【02】react 之 jsx