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

 

 

　　

　　

　　

 

React系列（一）：React入門