react學習筆記-01

最後更新：2016-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：bsp doctype render ops 括弧文法 browser html模板 eem

1. HTML模板

　　Jsx是react的文法糖，最終會被編譯成js文法。因此需要第三方庫browser將jsx轉換成js。

　　由於react 0.14版本之後，將react和react-dom拆分，所以需要分別引入react和react-dom

　　這是官網的一個demo

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <script src="../build/react.js"></script> 5     <script src="../build/react-dom.js"></script> 6     <script src="../build/browser.min.js"></script> 7   </head> 8   <body> 9     <div id="example"></div>10     <script type="text/babel">11       ReactDOM.render(12         <h1 color>Hello, world!</h1>,13         document.getElementById(‘example‘)14       );15     </script>16   </body>17 </html>

　　但是編譯之後是這樣的：

React.render( React.createElement("h1", {color: "red"}, "Hello, world!"), document.getElementById(‘example‘) );

　　render()方法裡面的html代碼被轉換成了React.createElement.因此闊以使用React.createElement來建立模板，但不推薦。

　　React.createEleemt(type,[props],[...children]):

　　　　type:the type argument can be either a tag name string(such as "div"),or a React Compoment()

　　jsx文法規則：render方法第一個參數，首寫字母如果是小寫就是HTML代碼，如果是大寫字母就是React組件；

　　　　　　　　jsx會主動去檢查標籤是否閉合，如果沒有閉合，直接報錯。

2.ReactDOM.render()+js

　　只需要用大括弧括起來就可以使用js文法。

 1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; 2  3       ReactDOM.render( 4         <div> 5         { 6           names.map(function (name) { 7             return <div>Hello, {name}!</div> 8           }) 9         }10         </div>,11         document.getElementById(‘example‘)12       );

　　編譯之後變成：

1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];   2 React.render(   3   React.createElement("div", null, names.map(function (name) {  4     return React.createElement("div", null, "Hello, ", name, "!")   5   }) ),  6  document.getElementById(‘example‘)  7 );

還是三個參數，第二個arg為null，第三個參數就是js代碼。所以js代碼只能放一行運算式，不能有;出現。

比如這樣寫就是錯誤的：

 1 React.render(   2 <div>   3 {   4 var a = 1;   5 names.map(function (name) {   6 return <div>Hello, {name}!</div>   7 })   8 }   9 </div>,  10 document.getElementById(‘example‘)  11 );

3.render 數組

　　arr是個數組，jsx會把arr的所有成員都添加到模板中。只需要用{}把arr括起來，表示js代碼即可。

var arr = [  <h1>Hello world!</h1>,  <h2>React is awesome</h2>,];ReactDOM.render(  <div>{arr}</div>,  document.getElementById(‘example‘));

編譯後結果：

1 React.render(   2          React.createElement("div", null, [<h1>Hello world!</h1>,<h2>React is awesome</h2>,]),  3         document.getElementById(‘example‘)  4        );

react學習筆記-01

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More