ReactJS實用技巧（1）：JSX與HTML的那些不一樣

在項目中使用ReactJS也已經有大半年了，收穫不少也踩過很多坑。不想把這個系列寫成抄書似的羅列，旨在總結些經常使用的技巧及常見的坑，以幫助初心者快速入門，想系統學習的同窗仍是多閱讀文檔。

JSX本質上與HTML並多大不要緊，標題所說的不一樣是指語法上的不一樣。正由於兩者比較類似，初心者纔會在不少細節地方混淆。

JSX實際是一種語法糖，最終會轉換成JavaScript代碼，首先咱們看一段React最簡單的組件結構：

var HelloReact = React.createClass({ render: function() { return (<h1 className='title'>Hello React</h1>);
 } }); React.render(<HelloReact />, document.querySelector(#container));

首先咱們建立了一個只包含h1標籤的組件，並將其保存在名爲HelloReact的變量中，以後將其做爲標籤名，渲染到id爲"container"的DOM節點中。

這裏要注意的是，組件保存的變量名首字母必須大寫，不然沒法渲染成功。接下來看下jsx被轉義後的語法是什麼樣的：

var HelloReact = React.createClass({ render: function() { React.createElement('h1', {className: 'title'}, 'Hello world') } }); React.render(<HelloReact />, document.querySelector(#container));

能夠看到使用JSX能夠大大簡化編寫難度，這點在多個組件嵌套時更加明顯。正由於JSX的存在使得新手對React的學習成本大大下降。

*此文的示例可能是React老版本的語法，新版本的React移除了JSXTransformer.js文件，增長了react-dom.js文件。 博主會在以後的博文中詳述新版本的語法及工程建立方法，固然最快的方式仍是查閱官方更新文檔。

下面列出類似但又不一樣的地方：

 

類名

HTML

<div class="myStyle"></div>

JSX

<div className="myStyle"></div>

 

模板

HTML

var name = 'Daryl', templ = '<p>' + name + '</p>'; //<p>Daryl</p>

 JSX

render: function() { var name = 'Daryl'; return (<p>{name}</p>);
}

在JSX的語法中，大括號括起來的部分會被當作JavaScript代碼來解析。不只僅是在標籤之間，在class、style等等屬性賦值時都可以使用大括號來進行。須要注意的是，大括號之之間只能寫表達式，而不能寫判斷等語句。

render: function() { var a = 1; return (<p>{++a}</p>); //正確
} render: function() {
　　 var a = 1; return (<p>{if (true) {a++;}}</p> //報錯
}

對於須要判斷狀態的狀況能夠多使用邏輯運算符(||、&&等)以及三目運算符來完成。

render: function() { var status = true; return (<div className={status ? 'styles1' : 'styles2'}></div>);
}

若是判斷的邏輯比較複雜，簡單的表達式沒法知足要求，仍是使用保存於變量中方法。

render: function() { 　　var nowDate = new Date(),
　　　　 today = nowDate.getFullYear() + '.' + Number(nowDate.getMonth()+1) + '.' + nowDate.getDate();
　　return (<p>Today is {today}.</p>); //2016.3.7
}

 

內嵌樣式

HTML

<div style="width:30px;height:30px;background-color:red"></div>

JSX

<div style={{width:30,height:30,backgroundColor:'red'}}></div>

能夠看到JSX中的style屬性並非簡單的接收一個字符串，那兩層大括號是什麼意思呢。其本質是接收一個對象做爲參數，最外層的大括號是以前說過的用來解析JS代碼的區域，而裏面的只是個對象而已。

具體的樣式屬性名稱相似jQuery中的駝峯命名方式。同時可使用如下的寫法：

React.create({ 　　render: function() { 　　　　return (<div style={styles.container}>
               　　<p style={styles.title}>標題</p>
               　　<p style={styles.content}>內容</p>
　　　　　　　　</div>);
 } }); var styles = {
　　container: {
　　　　textAlign: 'center'
　　}, 　　title: { 　　　　fontSize: 20, 　　　　fontWeight: bold,
　　　　color: '#000' 　　}, 　　content: { 　　　　fontSize: 13,
　　　　color: 'rgba(0,0,0,0.5)' 　　} };

以上這種方式讓樣式和內容的耦合下降，代碼維護也更方便。只不過在使用React開發中，可能更多的人仍是習慣使用外聯樣式表來編寫CSS。

其實這種寫法應用最多的是在開發React Native項目中，經過StyleSheet建立一個樣式集，由於React Native的項目不像普通的WEB工程能夠很方便的引入樣式表。

 

事件綁定

HTML

<div onclick="myFunction()"></div>

JSX 

React.createClass({ render: function() { return (<div onClick={this.handlerClick}>點我！</div>);
 }, handlerClick: function() { alert('讓你點你就點？'); } }); 

在JSX中事件屬性都是以駝峯命名的方式，HTML中的內嵌事件的編寫方式在JSX語法中是無效的。

 

列表

列表是如今的web應用中是不可缺乏的一種結構。傳統的方式一般爲請求到數據集，經過JS遍歷生成節點，添加到DOM中：

var dataArr = [1,2,3,4,5,6,7], templ = ''; dataArr.forEach(function(item, index) { templ += '<div>' + item + '</div>'; }); $('body').append(templ);

如上，是咱們使用的一種比較"原始"的方法。React實際上是一個狀態機，其中數據結構和視圖綁定在一塊兒，一切以狀態來控制，經過改變數據層觸發DOM更改。

雖然在React中也能夠直接操做DOM，可是並不提倡，只有在萬不得已或者某個東西加入到狀態中十分繁瑣、代價比較大的狀況下才去考慮。

下面咱們看下在JSX中是如何渲染列表的：

render: function() { var dataArr = [1,2,3,4,5,6,7], jsxArr = []; dataArr.forEach(function(item, index) { jsxArr.push(<li>{item}</li>);
 }); return (<ul>{jsxArr}</ul>);
}

上例中jsxArr實爲一個每項均爲JSX標籤模板的數組，這段代碼反映出React中一個很重要的特性，JSX標籤以前的多子節點能夠以數組的方式插入，理解這點就能很快地繞過了React中列表的坑。只是在實際開發中咱們一般使用下面的方式：

render: function() { var dataArr = [1,2,3,4,5,6,7]; return (<ul> 　　{ 　　 dataArr.map(function(item, index) { 　　return (<li>{item}</li>);
 　　}); 　　} 　　　　　　 </ul>);
} 

固然在列表模板結構比較複雜的狀況下，仍是建議在return以前生成好，並賦值給某一變量，return時在標籤之間插入該變量。

除了上述這些不一樣點之外，JSX還有着本身獨有的某些屬性，好比：ref、key等，博主會在以後的博文裏闡述用法。

 

感謝您的瀏覽，但願能有所幫助。