React學習之路（一）

React

React不是一個完整的MVC框架，最多能夠認爲是MVC中的V（View），甚至React並不很是承認MVC開發模式

高性能：複雜或頻繁的DOM操做一般是性能瓶頸的緣由，爲此引入了虛擬DOM

虛擬DOM：每當數據變化時，React會從新構建DOM樹

使用React大大下降了邏輯複雜性，意味着開發難度下降，產生bug更少

React衍生品：React native  是React衍生出的一套框架

React的特色和優點

1.虛擬DOM

2.jsx

3.單向數據流

4.組件化開發、高效率

組件：同時包含html、css、js、images元素的聚合體

react.js中有React對象，幫助咱們建立組件等功能

react-dom.js中有ReactDOM對象，渲染組件的虛擬dom爲真實的dom

jsx編譯方法：1.瀏覽器端編譯，經過引入browser、babel對script內的代碼編譯      2.利用webpack等開發環境進行編譯，將編譯好的文件引入

render函數和vue組件裏的render徹底同樣，在vue組件中能夠不用編寫render函數，這個時候可使用template模板來編寫組件的虛擬don結構，而後vue組件會自動將模板compile成虛擬dom結構放入render中執行，可是React中須要編寫render函數

組件經過React.createClass建立（es5），在es6中直接經過class關鍵字建立

組件就是一個構造器，每次使用組件都至關於在實例化組件

React的組件必須使用render函數來建立組件的虛擬dom結構

組件使用ReactDOM.render方法將其掛載在某一個節點

組件的首字母必須大寫

jsx是一種語法，全稱：javascript xml

即便使用了jsx語法以後，也是須要將其變編譯成原生的createElement

組件dom添加樣式

在React裏的表達式的符號是‘{}’，做用和vue的表達式做用是同樣的

想給虛擬dom添加行內樣式，須要使用表達式傳入樣式對象的方式來實現

行內樣式須要寫入一個樣式對象，而這個樣式對象的位置能夠放在不少地方，例如React.createClass的配置項中、render函數裏、組件原型上、外鏈js文件中

React推薦咱們使用行內演示，由於React以爲每個組件都是一個獨立的總體（反正不這麼寫，是否是傻）

大多數狀況下仍是爲元素添加類名、id以使用某些樣式，注意添加class類名時，由於class是關鍵字，因此寫成className

在React中，給組件的dom添加事件的時候，也是在行內添加的方式，事件名字須要寫成小駝峯的方式，值利用表達式傳入一個函數便可

注意：在沒有渲染dom時，頁面沒有真實dom，獲取不到dom

組件嵌套

將一個組件渲染到某一個節點裏的時候，會將這個節點裏原有內容覆蓋

組件嵌套的方式就是將子組件寫入到父組件的模板中，且React

注意：React中的註釋要寫成{/**/}

React中的數據承載（Props/State）

React也是基於數據驅動的框架，組件中必然須要承載一些數據，在React中起到這個做用的是屬性和狀態（props & state）

1. 屬性（props） 在組件外部傳入，或者內部設置，組件內部經過this.props得到

2. 狀態（state） 在組件內部設置或者更改，組件內部經過this.state得到

屬性（props）

屬性通常是外部傳入的，組件內部也能夠經過一些方式初始化的設置，屬性不能被組件本身更改

屬性時描述性質、特色的、組件本身不能隨意更改

使組件擁有屬性的方式：

1. 在裝載組件的給組件傳入

傳入數據的時候，除了字符串類型，其餘的都該報上表達式，但爲了規範，全部的數據傳遞最好都包上{}

var Gouzi = React.createClass({

    render(){

        console.log(this)

        return (

            <div>

                <p>個人名字：{this.props.name}</p>

                <p>個人性別：{this.props.sex}</p>

                <p>個人年齡：{this.props.age}</p> 

                <p>個人父親是：{this.props.father}</p>                                             

            </div>

        )

    }

})

 

let info = {

    sex:'male',

    father:'狗爸'

}

 

ReactDOM.render(<Gouzi {...info} name={"大狗子"} age={26}/>,app)

2.父組件給子組件傳入

父組件在嵌套組件的時候爲子組件傳入，傳入的方式和上面的方式同樣

//父組件的render函數

render(){

    return (

        <div>

            <p>父組件：</p>

            <hr/>

            <Son name={'大狗子'}/>

            <Son name={'二狗子'}/>

        </div>

    )

}

3. 子組件本身設置

子組件經過getDefalutProps來設置默認的屬性

getDefaultProps的值是函數，這個函數會返回一個對象，咱們在這裏對象裏爲組件設置默認屬性

這種方式設置的屬性優先級低，會被外部傳入的屬性值覆蓋

getDefaultProps:function () {

    console.log('getDefaultProps')

    return {

        name:'狗爸',

        sonname:'二狗子'

    }

},

//render

<p>我