React系列（一）：React入門

React簡介

1.由來

　　React是有Facebook開發出來用於構建前端界面的JS組件庫，由於其背后的強大背景，使得這款庫在技術開發上完全沒有問題。

2.React的優勢

　　解決大規模項目開發中數據不斷變化變得難以操作的問題；

　　組件化開發，使得開發更加快速；

　　單向數據流，有利於找到問題；

　　虛擬DOM，在React內部有一套diff算法可以快速的計算出整體需要改動的位置，從而做到快速局部刷新；舉個栗子：刪除一個列表再插入個新表，計算后會比較出不同然后插進去；

　　JSX的編譯方式，將HTML代碼和JS混合到一起來寫，組件結構清晰，數據結構清晰，之后可以通過工具轉成JS。

3.開發方式

　　使用React開發可以像平常開發一樣， 最后講JSX轉換一下即可，在0.14，React拆分開，所以我們需要引入三個文件

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/JSXTransformer.js"></script>

　　第一個不解釋，第二個文件作用是將React結構轉換成HTML后插入到指定的DOM節點，第三個為轉換文件，將JSX格式轉換成JS格式的文件。當然正常情況下還需要引入我們寫的組件（如果你沒直接把組件寫在HTML里的話= =#）

　　另外一種開發方式就是基於node環境開發，配合webpack，gulp打造一套自動化構建工具，同時在Node里開發我們還可以配合babel使用ES6語法來編寫，這里不細說。

 

基本語法

1.Hello World

　　一切語言的學習開始都是我們熟知的這個短語~在將React轉換為HTML結構的時候需要用到ReactDOM.render

ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('div1')
);

　　插入之前引入的JS和這個JSX文件就可以打開瀏覽器看一下了~

　　可以看到ReactDOM.render中第一個參數為傳入的組件，第二個參數為加入到某個標簽里，注意，一般情況下最好不要直接添加到document.body中。

2.組件的編寫

　　但這顯然離我們說的組件化還有十萬八千里，舉個簡單的例子，一個簡單的上中下結構的網頁我們可以給它拆成三部分（當然也可以更多，這里說最簡單的），那么我們就需要編寫3個組件，其中頭部和底部都是可以在整站的很多位置復用的。那我們開始編寫我們的組件：

　　

var Header = React.createClass({
    render: function() {
        return <h1>歡迎來到React學習站</h1>
    }
});

var Main = React.createClass({
    render: function() {
        return (<div className="main_box">
                    <h2>這是一篇關於學習React的網站</h2>
                    <div>我是內容，哈哈哈……</div>
                </div>
    )}
});

var Footer = React.createClass({
    render: function() {
        return (<div>
                    <p>聯系電話1333333333</p>
                    <p>QQ：6843521463</p>
                </div>
    )}
});

var Index = React.createClass({
    render: function() {
        return (<div>
                    <Header />
                    <Main />
                    <Footer />
                </div>
    )}
});
        
ReactDOM.render(
        <Index />,
        document.getElementById('div1')
);

 

　　這里首先我們使用React.createClass方法定義了3個組件，再在Index組件里將三個組件包在一起，最后添加到DOMrender中。

　　其中需要注意的是，在render里的代碼結構如果是多層，在最外層必須包裹一層標簽，否則會報錯。

　　定義的名字一定需要以大寫開頭。

3.props

　　prop在當前組件里來傳遞數據，常見的情況是父級傳給子級數據，然后子級來調用。

var ListContent = React.createClass({
    render: function(){
        return (
            <div>
                <div>{this.props.json.one}</div>
                <div>{this.props.json.two}</div>
            </div>
        );
    }
});

var All = React.createClass({
    render: function(){
        var json = {
                'one': '這是一個用react寫出來的東西',
                'two': 'hello world',
        };
        return (
            <div>
                <ListContent json={json} />
            </div>
        );
    }
});

ReactDOM.render(
    <All />,document.getElementById('box')
);

　　這里我們在All中定義了一個數據，然后將它傳入ListContent 這個組件里，這個時候ListContent 里就有了json的數據，在里面的內容結構中就可以使用this.props來調用了，需要注意的是，在標簽里插入內容需要用{}來包起來。

4.state

　　React可以算是一個大的狀態機，其中的數據改變幾乎都來源於狀態的改變，state可以用來設置這個狀態，當觸發某個動作的時候來改變這個state從而更新頁面中相關的數據。一個簡單的例子：

　　

var ListContent = React.createClass({
    getInitialState: function() {
        return {
            click: true
        };
    },
    ShowName: function() {
        this.setState({
            click: false
        });
        alert('iceblue')
    },
    render: function() {return ( 
            < div >
                < button disabled={this.state.click} onClick = {this.ShowName} > 顯示名字 < /button> 
            < /div >
        );
    }
});

ReactDOM.render( < ListContent /> , document.getElementById('box'));

　　在初始環境我們用getInitialState（固定名字）來設定初始的state值，當然也可以不設定。這里我們設定了一個狀態click，我們的想法是點擊之后按鈕變得不可點擊。這里我們定義了一個ShowName（自定義）函數來做兩件事，顯示名字和改變狀態，注意，最好在改變狀態的函數中不添加其它作用代碼，這里為了省事。這個時候當我們觸發onClick（固定）事件后調用之前定義的函數，通過setState來改變click的值，這時候組件會接收到這種改變並對頁面進行改變。

　　基本通過props和state就可以完成一些簡單的組件化開發了。

5.map

　　與JQ的map類似，可以遍歷子節點然后進行相應的操作，我們可以利用map來減少大量重復的代碼，只需要改變其中填充的數據即可。

var number = ['1', '2', '3', '4'];
ReactDOM.render(
  <div>
    {
        number.map(function(name,key){
            return <div key={key}>這次年終有{name}個月</div>
        })
    }
  </div>,
  document.getElementById('box')
);

6.ref

　　最開始的時候我們提到了React的最大特點是虛擬DOM，那么也就是說我們所創建的組件其實並不是真實的節點，只有當插入完成后才會變成真實的DOM。當狀態改變后，再將算完的結構展現到頁面上。如果我們需要獲取真實的DOM節點就需要用到ref屬性。

var MyComponent = React.createClass({
        handleClick: function() {
         console.log(this.refs.myTextInput);
        },
        render: function() {
           return (
                   <div>
                       <input type="text" ref="myTextInput" value="隨便寫點" />
                       <input type="button" value="print" onClick={this.handleClick} />
                   </div>
           )}
});

ReactDOM.render(<MyComponent/>,document.getElementById('box'));
//<input type="text" value="隨便寫點" data-reactid=".0.0" />

　　這里首先在第一個input中定義ref，之后就能獲取到真實節點並進行相應的操作了，其中data-reactid不用管，類似於DOM分層標識，可以讓React清楚的知道DOM結構並作出快速的計算。

7.生命周期

　　所謂生命周期就是在代碼運行的不同階段我們可以進行不同操作，其中大體有這么幾種（固定名字）：

　　getInitialState: 在組件掛載之前調用一次。返回值將會作為 this.state 的初始值。

　　componentWillMount: 服務器端和客戶端都只調用一次，在初始化渲染執行之前立刻調用。如果在這個方法內調用setState，render() 將會感知到更新后的 state，執行僅一次

　　componentDidMount: 在初始化渲染執行之后立刻調用一次，僅客戶端有效（服務器端不會調用）。在生命周期中的這個時間點，組件擁有一個 DOM 展現，你可以通過 this.getDOMNode() 來獲取相應 DOM 節點。

還有更多的更新組件方法
　　componentWillReceiveProps: 在組件接收到新的 props 的時候調用。在初始化渲染的時候，該方法不會調用

　　shouldComponentUpdate: 在接收到新的 props 或者 state，將要渲染之前調用。該方法在初始化渲染的時候不會調用

　　componentWillUpdate: 在 state 改變的時候執行一些操作

8.事件名　

　　觸摸事件：onTouchCancel\onTouchEnd\onTouchMove\onTouchStart

　　鍵盤事件：onKeyDown\onKeyPress\onKeyUp

　　剪切事件：onCopy\onCut\onPaste

　　表單事件：onChange\onInput\onSubmit

　　焦點事件：onFocus\onBlur

　　UI元素：onScroll(移動設備是手指滾動和PC的鼠標滑動)

　　滾動事件：onWheel(鼠標滾輪)

　　鼠標類型:onClick\onContextMenu(右鍵)\onDoubleClick\onMouseDown\onMouseEnter\onMouseLeave\onMouseMove\onMouseOut\onMouseOver\onMouseUponDrag\onDrop\onDragEnd\onDragEnter\onDragExit\onDragLeave\onDragOver\onDragStart

9.代碼書寫的注意事項

　　樣式：

　　　　在React中傳遞數據前面提到過要用{}包起來，同理在標簽內傳遞

　　　　class：className={fontColor}或className="class1"

　　　　style：style={{color:"red"}}或style={newStyle}，其中newStyle為定義的樣式集合{corlor:"red",height:.......}

　　邏輯：

　　　　如果想在React中插入代碼，可以在代碼塊外面寫，比如

 var MyComponent = React.createClass({
        if(...){do something};
        render: function() {
           return (
                   <div>1</div>
           )}
});

　

　　今天就寫這些，日后可能會出一些關於webpack或者redux結合react的博客，不過博主很懶，不一定啥時候了= =#，最后附上中文API地址：

　　http://reactjs.cn/react/docs/getting-started.html