react學習筆記2

最後更新：2016-02-22 來源：互聯網

上載者：User

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

標籤：

1.build檔案介紹

（1）react.js 是react的核心庫

（2）react-dom.js 提供與DOM相關功能

（3）browser.js 是將JSX文法轉為javascript文法

2.組件的繼續學習

　　注意：組件的第一個字母必須大寫，否則會報錯。組件的用法和html標籤完全一致，可以任意加入屬性。組件的屬性，可以通過 this.props 對象上擷取。

3.this.props.children

　　this.props.children 有三種可能：

　　　　　　　　　　　　 a.當前組件沒有位元組點，返回undefined ；

　　　　　　　　　　　　 b.如果有一個位元組點，資料類型是object ；

　　　　　　　　　　　　 c.資料類型是array

　　（1）代碼預覽

　　（2）遊覽器裡效果

　　（3）源碼　　

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      var NotesList = React.createClass({      render: function() {        return (          <ol>          {            React.Children.map(this.props.children, function (child) {              return <li>{child}</li>;            })          }          </ol>        );      },      });      ReactDOM.render(        <NotesList>          <span>hello</span>          <span>world</span>        </NotesList>,        document.getElementById(‘example‘)      );    </script>  </body></html>

4.PropTypes

　　組件類的 PropType 屬性，就是用來驗證組件執行個體的屬性是否符合要求。

　　(1)代碼預覽

　　(2)遊覽器裡效果

　　（3）源碼

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">    var MyTitle = React.createClass({      propTypes: {        title: React.PropTypes.string.isRequired,      },      render: function() {         return <h1> {this.props.title} </h1>;       }    });    var data = 123;    ReactDOM.render(      <MyTitle title={data} />,      document.body    );    </script>  </body></html>

5.擷取真實的dom節點

　　組件並不是真實的dom節點，而是存在於記憶體中的一種資料結構，叫做virtual dom。只有插入文檔中才會變成真實的dom 。根據react的設計，所有的dom的變動，都現在虛擬dom上發生，然後再將實際發生變動的部分，反映在真實的dom上，這種演算法叫做dom diff，它可以極大提高網頁的效能。

　　（1）代碼預覽

　　（2）遊覽器效果如下：

　　（3）源碼

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">    var MyComponent = React.createClass({      handleClick: function() {        this.refs.myTextInput.focus();      },      render: function() {        return (          <div>            <input type="text" ref="myTextInput" />            <input type="button" value="Focus the text input" onClick={this.handleClick} />          </div>        );      }    });    ReactDOM.render(      <MyComponent />,      document.getElementById(‘example‘)    );    </script>  </body></html>

6.this.state

　　this.state 和 this.props 都是用來描述組件的特性。this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是隨著使用者而產生的熱性。

　　（1）代碼預覽

　　（2）遊覽器裡效果（點擊的時候會切換）

　　(3)源碼

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      var LikeButton = React.createClass({        getInitialState: function() {          return {liked: false};        },        handleClick: function(event) {          this.setState({liked: !this.state.liked});        },        render: function() {          var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘;          return (            <p onClick={this.handleClick}>              You {text} this. Click to toggle.            </p>          );        }      });      ReactDOM.render(        <LikeButton />,        document.getElementById(‘example‘)      );    </script>  </body></html>

7.表單

react學習筆記2

本文章原先以中文撰寫並發佈於 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