個人關於React的一些理解

標籤：中間   creat   es6   web   沒有   value   reduce   add   div   

##React背景

React是當前前端最火的架構，它的理念思想及構建方法比AngularJS更適合做webApp。

它是由facebook團隊研發並開源到社區，所以它有很強大的技術背景，而且它的架構方式也很新穎，有很大的發展前景，極有可能是未來前端架構的領頭羊，所以我們可以多關注關注React這個架構。

##React的實現

React是一個組件化的開發方式，任何一個組件都可以被替換或者被更改，每個DOM節點都可以當做是一個組件，這個理念和我們常用的模組化有點類似。

而其功能之所以這麼強大是因為其前沿的虛擬DOM技術：react會將HTML的整個DOM節點都複製到記憶體當中，當某個節點被修改或被替換的時候，它會現在記憶體中找到被修改的節點，對其記憶體中虛擬出來的節點進行增刪改查等功能後再渲染到頁面的真實節點上去，這樣就避免了整個頁面的重新渲染，而且對虛擬節點的操作效率很高，它省去了去頁面渲染的過程。

我們常用的架構常常都要和MVC架構作比較，在這裡，React只相當於MVC中 的V，即視圖部分，它沒有模型和控制器，但它可以和其他模型相配合。

React採用----分而治之的思想，但操作起來比angularJs或者ES6的模組化都要難一點，適合作單頁應用。

 

##React的使用

 在使用react的時候最少要引入兩個JS檔案。

--> React.min.js React-Dom.min.js‘

最基本的React操作，如：

    ReactDOM.render(
        React.createElement(‘h1‘,null,‘Hello Eeact!‘),
        document.getElementById(‘content‘)
    );

這樣開發新節點會顯得有點複雜，所以，React又提供了我們一種新的文法，JSX

 我們可以通過打包的方式將JSX打包成html代碼

我們可以在scrpt標籤中定義React的類型：
type = "text/babel"
在向標籤中添加類的時候不能寫class  只能寫className
往標籤內寫style的時候不能寫  style=""  要寫成 style ={}

####建立組件

    var MyElement = React.createClass({
        render:function(){
            return <div>
                    <h1>title</h1>
                    </div>
        }
    });

在使用的時候寫：

    ReactDOM.render(
        <myElement></myElement>,
        document.getElementById(‘content‘)
    );

在JSX的使用中，所有變數的使用都要加一個{}

 

##React參數的傳遞

正如我們常會用到值傳遞一樣，React中也有一些值傳遞的方法:

**如何?資料傳遞**:組件與組件之間傳遞，有兩個:props和children,props可以得到當前對象的所有屬性和文字屬性,而children擷取的是開始標籤和結尾標籤的中間文本,他也是從props裡擷取的

 父組件往子組件傳遞參數有兩種方法：

1、props

用法：現在父組件定義一個屬性，然後傳給子組件，子組件通過this.props.屬性名稱擷取。

2、children

用法：擷取開始標籤和結束標籤中間的內容。

props可以得到屬性及children。
而children只能得到開始標籤和結束標籤中間的內容。

React最難的地方就是資料的傳遞

 

##React的redux方法

React中資料傳遞是單向資料流，每個組件之間互動用state，但state不能傳遞，由於是單向資料流，所以兄弟之間傳遞需要通過父級傳遞，但當組件比較複雜的時候，用這種方法傳遞就比較混亂

因此React中有個flux模式，他的模式中所有的state放在一個或幾個store倉庫中，通過dispatch分發來改變store裡面的值，如果其他組件綁定store的資料，那麼store資料一改，那麼組件的資料也會改變，那麼所有資料的操作就不會通過state,而是在store裡面修改;而**redux就是類似這樣流程的工具**，借鑒和改進flux,還可以用在angular和jquery中。

redux的流程：當我們需要操作資料的時候，在調用dispatch之前需要一個action來調用,然後再分發到store裡面，store裡面有中間鍵和reducer的函數(負責控制器的作用)來處理將資料存到store,從而改變組件的資料。

store的設計是個痛點。

 在用redux之前，要先下載：npm install redux,以及下載中間鍵npm install react-redux

每個action都要寫相應的Reducer

    const textReducer = function(state = {},action){
      //type字串一般是大寫
      //這裡返回的state是新的state
      if (action.type == "ADD_COUT") {
    var newState = Objext.assign({},state,{count:action.count});//assign合并兩個對象的方法，傳3個參數
      return newState;
      }
    }

建立store: createStore(textReducer);

 

##關於React的互動問題

這裡還必須提到一點就是，因為我們使用React就是因為其操作虛擬DOM的方便快捷，所以在使用React的時候要盡量避免對真實節點的操作。

 在React中加事件，如，添加一個點擊事件：
    compute:function(){
        if(!this.refs.show.innerHTML){
            this.refs.show.innerHTML = 1;
        }else {
            this.refs.show.innerHTML = parseInt(this.refs.show.innerHTML) + 1; 
        }
        //因為這是動作節點，所以不推薦使用
    },
    render:function(){
        return <div>
        <input type = "button" value ="點擊" onClick ={this.compute}/>
        <span ref="show"></span>
        </div>
    }

在React中提供了一個屬性 狀態：state，每一個組件都可以去建立一個他自己的狀態，state的特性是無法傳遞，只能自己使用，別的組件無法使用。

 在使用state的時候，需要做以下幾步：

1、初始化state

     getInitialState:function(){
        return {
            //這裡定義的就是自己的state屬性
            num:0
        }
    }
2、操作state

    compute:function(){
        this.setState({
            num:this.state.num + 1
        })
    }
    在節點中添加
    <span>{this.state.num}</span>

 

##React的生命週期

在React中，組件與組件之間調用時，常會使用到一些比較特殊的方法，如需要在組件剛剛載入時就執行某個函數，當某個組件的值發生變化時某個組件的某個方法被立即執行等等，這裡，我們就需要用到React的生命週期的方法。

在React中又七種生命週期的方法：

**componentWillMount

**componentDidMount

**componentWillReceiveProps

**shouldComponentUpdate

**componentWillUpdate

**componentDidUpdate

**（PS：還有一個我忘了，希望各位大神補充）

其中：

1、**componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，componentDidUpdate**：這四個方法在組件剛載入的時候不會立即執行。

2、shouldComponentUpdate在當前組件的屬性值或state發生改變的時候會在render之前執行，而且返回的是布爾值，如果不寫或為false，會阻止後面的執行；

3、componentWillUpdate是在更新之前執行的；

4、componentDidUpdate是在render後執行;盡量避免在這三個方法中改state;

5、當props改變的情況下才會執行componentWillReceiveProps,但要改變props值就需要設定子組件,在是四個組件裡最先執行的；

6、componentWillReceiveProps可以傳參數newProps,得到的是新的props

7、shouldComponentUpdate可以傳newState和newProps，可以得到新的state和新的props

 

個人關於React的一些理解