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