React入門學習

pengj發表於2016-02-03
React

如何渲染到容器

直接上程式碼：

    //第一個引數是構造的元件，第二個引數是使用元件的容器
    ReactDom.render( <Avatar name=`` link=`` />, document.getElementByID(``));

render渲染頁面 將元件放到選定的元素裡面

如何定義元件

使用React.createClass({render:function(){return ( 我是dom元素 )}})構建

    var ProfilePic = React.createClass({
          render: function() {
            //可以在return前進行相關處理
            return (
                  <img src={this.props.link} /> 
            );
        }
    });

1.return()括號中只能填寫一個標籤，否則報錯
2.this.props是ReactDOM.render中傳遞的屬性，是一個物件 對於元件套元件的方式可以傳遞屬性值，如下面例子

元件套元件

    // 渲染到容器
    ReactDOM.render(
        <Avatar
            name="GuoYongfeng"
            link="https://avatars2.githubusercontent.com/u/8686869?v=3&s=460"
        />,
         document.getElementById(`example`)
    );
    
    var Avatar = React.createClass({
          render: function() {
            return (
                  <div>
                <ProfilePic link={this.props.link} /> //this.props包含了name和link的屬性，同時在ProfilePic元件中可以使用this.props獲取link的值
                    <ProfileLink name={this.props.name} />
                  </div>
            );
          }
    });

如何設定某個變數的初始值

使用getInitialState:function(){return {}}宣告初始化變數，使用this.setState({鍵值對})修改getInitialState函式中的變數，通過this.state物件獲取屬性的值，程式碼如下：

    var ClickApp = React.createClass({
    getInitialState:function(){
        return {
            clickCount: 0,                
        }
    },
    handleClick: function(e){
        this.setState({
            clickCount: this.state.clickCount + 1,
        });
    },
    render: function(){
        return (
            <div>
                <h2>點選下面按鈕</h2>
                <button onClick={this.handleClick}>點選我</button>
                <p>你一共點選了：{this.state.clickCount}</p>
            </div>
        )
    }
    });

getInitialState在元件的生命週期內只會執行一次，用來設定元件的初始狀態。

this.props.children

this.props 物件的屬性與元件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性，它表示元件的所有子節點。
this.props.children的值有三種可能：如果當前元件沒有子節點，它就是 undefined ;如果有一個子節點，資料型別是 object；如果有多個子節點，資料型別就是 array。React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的資料型別是 undefined 還是 object

PropTypes

驗證元件提供的引數是否滿足要求。如 propTypes: { title: React.PropTypes.string.isRequired },render:function(){return} 程式碼的作用就是說明title是必須填寫的而且為字串。 使用 getDefaultProps來配置預設的字串 getDefaultProps : function () { return { title : `Hello World`};},

元件的生命週期

生命週期分為三個狀態：

  • Mounting：已插入真實 DOM

  • Updating：正在被重新渲染

  • Unmounting：已移出真實 DOM
    React 為每個狀態都提供了兩種處理函式，will 函式在進入狀態之前呼叫，did 函式在進入狀態之後呼叫，三種狀態共計五種處理函式。

  • componentWillMount()

  • componentDidMount()

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函式。

  • componentWillReceiveProps(object nextProps)：已載入元件收到新的引數時呼叫

  • shouldComponentUpdate(object nextProps, object nextState)：元件判斷是否重新渲染時呼叫

JSX轉化器

1.內嵌的jsx程式碼，需要在script標籤中要加上type="text/babel"，並引入browser.min.js5.8.24檔案，或者使用bower install babel --save-dev下載babel檔案中獲取，將ES6轉化為ES5
2.[已廢棄]使用react-tools模組，將程式碼轉化成線上程式碼 使用npm install -g react-tools安裝，使用jsx --watch src/ build/轉化
3.可以直接使用babel轉化，babel --presets react [es2015] src --watch --out-dir build，其中[es2015]是選填項，src是原始檔路徑 build是編譯後的檔案路徑
4.在gulp中使用gulp-react轉化

Html轉義

對於某些富文字內容，在頁面上顯示

    var content=`<strong>content</strong>`;
    React.render(
        <div>{content}</div>,
        document.body
    );
    
    //會直接顯示 <strong>content</strong> 相當於ejs中<%= %>

Html預設會對Html文章轉義，如何不轉義

    var content=`<strong>content</strong>`;    
    React.render(
        <div dangerouslySetInnerHTML={{__html: content}}></div>,
        document.body
    );

CDN檔案

1.react
react 包括 React.createElement、 React.createClass、React.Component、 React.PropTypes、 React.Children
react-dom 包括 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode
react-dom-server 包括.renderToString 和 .renderToStaticMarkup
react-with-addons

HTML 標籤 vs. React 元件

React.render方法可以渲染HTML結構，也可以渲染React元件。JSX使用首字母大小寫來區分是本地元件類還是Html標籤。
(1)渲染HTML標籤，宣告變數採用首字母小寫

    var myDivElement = <div className="foo" />;
    React.render(myDivElement, document.body);

(2)渲染React元件，宣告變數採用首字母大寫

    var MyComponent = React.createClass({/*...*/});
    var myElement = <MyComponent someProperty={true} />;
    React.render(myElement, document.body);

Small Tips

1.資料的傳遞都是需要至於{}之中，包括賦值<div {...other} className={fancyClass} />,{}中的變數都是可以通過ReactDom.render時傳入
2.使用default為字首，加上Checked,Value等設定預設值，如defaultChecked,defaultValue等，在元件中使用已有的屬性。
3.this.refs引用物件集合，在Dom元素上新增了ref屬性後，就會將這個Dom元素新增到this.refs之中，在頁面中這個標籤的值是唯一的，this.refs.xxxx.value這種方式可以獲取變數的值，ref是一種回撥的原理，當子元件的該屬性值改變，相應的值會回撥給父元件
4.在元件實現時，return(<div>{ }</div>)中的{}可以加入大量的javascript處理函式，如下：

    return (
      <ul>
        {
          this.props.list.map(function (child) {
            return <li>{child}</li> //注意這種寫法，<li>{child}</li>
          })
        }
      </ul>
    );

5.元件可以直接當做Dom標籤一樣使用，像button,h1等
6.與Javascript DOM中一樣的寫法，class對於className,html對應於htmlFor；另外，對於非html內建的屬性，一定要加上data-，如<div data-custom-attribute="foo" />
`
7.JSX 的基本語法規則

  • 遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；

  • 遇到程式碼塊（以 { 開頭），就用 JavaScript 規則解析

8.this.props 和 this.state不同點
由於 this.props 和 this.state 都用於描述元件的特性，可能會產生混淆。一個簡單的區分方法是,this.props表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著使用者互動而產生變化的特性。
9.元件中樣式的寫法：style="opacity:{this.state.opacity};"這種方式錯誤；使用 style={{opacity: this.state.opacity}}這種方式，第一重大括號表示這是 JavaScript 語法，第二重大括號表示樣式物件。
10.在componentDidMount中的設定請求返回的資料需要特別注意只有當資料返回回來才有效，通過 this.isMounted() 判讀，或者直接使用promise的then方法.檢視示例12

參考文件

1.阮一峰老師的[react-demos](https://github.com/ruanyf/react-demos)

相關文章