React在開發中的常用結構以及功能詳解

標籤：

一.React什麼演算法，什麼虛擬DOM，什麼核心內容網上一大堆，請自行google。

但是能把演算法說清楚，虛擬DOM說清楚的聊聊無幾。對開發又沒卵用，還不如來點乾貨看看咋用。

 

二.結構如下：

import reqwest from ‘reqwest‘;import React from ‘react‘;import ReactDOM from ‘react-dom‘;var Header = React.createClass({   handleClick:function(){     console.log(this.refs.head);     console.log(ReactDOM.findDOMNode(this.refs.head));   },   render:function(){     return (      <div style={{ backgroundColor:‘blue‘ }} onClick={ this.handleClick } ref=‘head‘>        <p>Header組件</p>      </div>     )   }})var ComponentDemo = React.createClass({//預設state  getInitialState() {    return {      current: 1,      openKeys: [],      result_data : {}    };  },//預設props  getDefaultProps() {      return {        key:{          value:2        }      };  },  //靜態方法  調用 ComponentDemo. getBusinessName()  statics:{      getBusinessName:function(){       return console.log(‘getBusinessName方法被調用。。。‘)     }   },  handleClick(e) {     console.log(‘div被點擊。。。‘);     console.log(this.refs.cct);     console.log(ReactDOM.findDOMNode(this.refs.cct))  },  componentDidMount: function() {    //非同步請求    reqwest({      url: ‘http://localhost:90/menu‘,      method: ‘get‘,      type: ‘json‘    }).then(result => {      if(this.isMounted()){        this.setState({          result_data : result.data        });      }          },function(err, msg){       console.log(err)       console.log(msg)    });    //使用props    console.log(this.props.key.value)  },  componentWillReceiveProps(nextProps) {      //接受新的props時候被觸發  },  render() {    return (      <div>          <Header ref=‘cct‘/>          <div style={{ height:‘100%‘,width:200 }} className=‘btn‘  onClick={ this.handleClick }>CCT部分</div>      </div>    );  }})ReactDOM.render(<ComponentDemo />,document.getElementById(‘contain‘));

 

這個例子中涉及了開發中常用的幾個知識點。

1.improt 這樣的引入方式是es6的文法 ，也可require

2.Header是個組件，組件的建立使用React.createClass({}),es6也還有別的寫法，反正我是用不慣

3.每個組件都需要一個render函數，return中只能包含一個頂層標籤，我們一般用div來包裹。且組件名稱應該大寫開頭。

4.refs的屬性可以協助我們突破虛擬DOM的限制，可以擷取到DOM結構，但是不要使用中文網上的類似:this.refs.xxx.getDOMNode()，因為這樣的寫法已經不被支援。

 this.refs.XXX的寫法是用來擷取react結構的。

 我們應該使用react-dom提供的專門操作DOM的方法：ReactDOM.findDOMNode(this.refs.XXX)。

 this.refs.XXX與ReactDOM.findDOMNode(this.refs.XXX)是不同的，雖然有時候我們列印出來的有時會相同。

5.當然，react最核心的就是一個狀態機器。getInitialState(只會在組件初始化的時候調用一次)就是用來初始化狀態的，我們可以通過this.setState()來修改狀態。狀態的每次修改都會出發render函數。

6.getDefaultProps這個函數可以協助我們設定一個不變的資料結構，以便取用。相當於定義了一個常量。

7.statics就是用來頂一個靜態方法的，我們可以定義各種函數，並通過ComponentDemo. getBusinessName()方式來調用。結構:組件名.函數名

8.最重要的事件機制也是存在的，就像例子中的onClick，大部門事件機制都是支援的。

9.componentDidMount(只會在組件渲染結束後調用一次)這個函數就是跟組件的生命週期相關了。我們一般在裡面會進行非同步請求之類的操作。

   componentWillMount(只會在組件執行初始化渲染之前調用一次)剛好跟上面的相反。

   還有其他的幾個，個人理解為組件進入，開始，離開的鉤子。

shouldComponentUpdate(object nextProps,boject nextState) (在函數有新的props或state的時候觸發)這個鉤子會主要管理組件是否更新的，返回的是個布爾值。預設是true，一般不建議使用。

10.組件肯定也少不了css的潤色。但是這裡添加style必須以對象的形式寫，如果是數位話，預設單位是px。

  其他的屬性必須用駝峰格式：style={{ backgroundColor:‘red‘ }}；

  class必須寫成className。

11.isMounted()是用來判斷組件是否已經插入DOM。一般請求後強烈建議在判斷是否插入DOM後，再來修改state。

絕對不要直接改變 this.state，因為在之後調用 setState() 可能會替換掉你做的更改。把 this.state 當做不可變的。

setState() 不會立刻改變 this.state，而是建立一個即將處理的 state 轉變。在調用該方法之後擷取 this.state 的值可能會得到現有的值，而不是最新設定的值。

不保證 setState() 調用的同步性，為了提升效能，可能會批量執行 state 轉變和 DOM 渲染。

setState() 將總是觸發一次重繪，除非在 shouldComponentUpdate() 中實現了條件渲染邏輯。如果使用可變的對象，但是又不能在 shouldComponentUpdate() 中實現這種邏輯，僅在新 state 和之前的 state 存在差異的時候調用 setState() 可以避免不必要的重新渲染。

 

以上僅屬於個人愚見，如果錯處，歡迎指出！

 

React在開發中的常用結構以及功能詳解