摘要：在構(gòu)造函數(shù)里面初始化的數(shù)據(jù)，把數(shù)據(jù)放在頁面上，點擊時候調(diào)用方法改變中的數(shù)據(jù)。是中父組件向子組件通信的方式，下面是一個簡單的例子使用組件我是顯示的數(shù)據(jù)我們定義組件時候在構(gòu)造函數(shù)中可以接收到參數(shù)，并且要使用傳到的構(gòu)造方法中。

React的學習之路還要繼續(xù)走下去，最近一邊在做未完成的項目一邊學習React，項目是vue寫的，后面還需要有一個后臺管理系統(tǒng)計劃使用react完成，寒假說長也不長，要抓緊時間了。

很多人不喜歡React，很大程度上是因為不喜歡jsx，那么jsx到底是什么呢？首先還是不要忘了React的基本哲學--一切都是js，包括文檔結(jié)構(gòu)。所以曾經(jīng)每天都會見到的html在react的世界里全都不存在，react通過一系列叫做react元素的對象來構(gòu)建虛擬DOM結(jié)構(gòu)，最原始的創(chuàng)建react元素的方式是這樣的：

const root = React.createElement("div", { className: "main" }, "我是一個div");

最終它將返回一個大概這樣子的對象（有所簡化過，不代表在 React 源碼中是這樣）：

const root = {
  type: "div",
  props: {
    className: "main",
    children: "我是一個div"
  }
};

這樣一個個創(chuàng)建節(jié)點其實是很麻煩的，想想看，如果每個整個虛擬DOM的內(nèi)容都要通過React.createElement來創(chuàng)建，代碼量會很多，而且我們根本無法直觀地看出樹形結(jié)構(gòu)，無論開發(fā)還是維護性都及其不友好。為了解決這一問題，一種新型的，類似xml結(jié)構(gòu)的語法擴展就誕生了，就是jsx。

上面的代碼結(jié)構(gòu)改成jsx的書寫方式就是這樣的：

const root =(
  

      我是一個div
  
);

這個結(jié)構(gòu)就很熟悉了，不過要記住，他不是html模板，它就是js，最終在執(zhí)行之前會被完全轉(zhuǎn)義成為純js代碼，所以使用jsx是不存在任何性能問題的。

jsx的標準語法結(jié)構(gòu)和xml完全類似，特別的，jsx中的html屬性要寫成小駝峰命名的形式，比如onclick就要寫成onClick。另一點需要注意的問題就是，由于class是js中的保留字，所以要用className來代替。

jsx使用jsx時候要時刻記住它是js表達式，所以它可以像普通的js表達式一樣，賦值傳參返回都可以。而在jsx內(nèi)部如果想使用表達式，就需要放在{}里面。這就是jsx語法，非常簡單，也不需要記憶特殊的指令，一切都可以和處理js一樣來處理，下面來看一個小例子：

const item = this.newsList.map((news, index) => (
    

      {news.title}
      {news.desc}
      {news.image ?  : null}
    
  )
);
const list = (
  

    {item}
  
);

這是一個在react開發(fā)中特別常見的使用場景，我們得到了一個數(shù)組的數(shù)據(jù)，需要以列表的形式渲染出來。在react中不需要使用任何迭代判斷的相關(guān)指令語法，只要會寫js的都能看懂上面的邏輯：通過數(shù)組的map方法迭代數(shù)組的內(nèi)容，在回調(diào)函數(shù)中處理數(shù)據(jù)，渲染成想要的樣式，就得到了一條一條列表項，插到列表里面就完成數(shù)據(jù)渲染了。我們可以發(fā)現(xiàn)在不論是迭代方法還是三元表達式等等，只要是js語法就可以隨意地寫到里面，自由度非常高。

了解了jsx，下一個重要概念就是組件了。組件不是react特有的，組件化開發(fā)有很多好處，組件符合高內(nèi)聚低耦合的要求，每一個組件是封裝了視圖和邏輯的一個相對獨立的個體，而整個頁面是由多個組件構(gòu)成的，每個組件可以多次復用。

組件可以理解為類似于函數(shù)調(diào)用一樣，定義好的組件是一個抽象的視圖，而我們通過傳入相關(guān)的“參數(shù)”來使它展示出我們想要的樣子，組件就是我們復用各種獨立部件的基本單位。

定義一個組件最簡單的方式是使用JavaScript函數(shù)：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

這是一個最簡單的函數(shù)定義組件，整個函數(shù)調(diào)用結(jié)果實際上就是返回一個

標簽，不過特別的是，標簽的內(nèi)容不是確定的，它是由我們傳入的參數(shù)來決定的。這就是組件開發(fā)，在React中，最常用的不是函數(shù)聲明組件，而是向下面一樣：

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

此處使用了ES6的類和繼承，創(chuàng)建了一個繼承自Component的類。這個組件和上一個組件效果是完全相同的，下面來重點分析React組件中幾個重要的概念。

核心數(shù)據(jù)狀態(tài)--state

什么是state?狀態(tài)，在react組件中，state是指一個組件UI呈現(xiàn)的最小狀態(tài)集。在react中，視圖層的更新是通過處理狀態(tài)的變化來實現(xiàn)的，而state就是對這一系列狀態(tài)的定義。react的數(shù)據(jù)是單向流動的，數(shù)據(jù)只能從模型層流向視圖層，對應到具體的實現(xiàn)，我們對state所做的一系列處理會自動的反映到視圖上，我們想要更新視圖，只更新狀態(tài)即可。說的可能比較抽象，看一個具體例子：

class ClickMe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  clicked() {
    this.setState({
        count: this.state.count + 1
    });
  }
  render() {
    return (
      
 this.clicked()}>
        點我{this.state.count}次
      
    );
  }
}

這個組件的效果就是點擊文字，會顯示你的點擊次數(shù)，效果很簡單就不截圖了，關(guān)于組件生命周期和點擊事件綁定后面再看，這里重點來看state的變化。在構(gòu)造函數(shù)里面初始化state的數(shù)據(jù)，把state數(shù)據(jù)放在頁面上，點擊時候調(diào)用setState方法改變state中的數(shù)據(jù)。

關(guān)于state有幾點需要注意：

state不能直接修改，直接修改state的值是不會更新視圖的，正確的更新方式是使用setState來改變state的值。

不是所有的變量都要放到state中，state里面的變量一方面是要來描述組件自身狀態(tài)，不需要反映到視圖上的內(nèi)容不是state。

state是最小狀態(tài)集，取自父組件的狀態(tài)信息不是自身狀態(tài)，不能放在state中。從外部傳入的東西要放在props中。

外部傳遞屬性--props

props是組件的另一個非常重要的概念，props指的是從外部傳入的屬性。props是React中父組件向子組件通信的方式，下面是一個簡單的例子：

class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        {this.props.data}
      
    );
  }
}

使用組件

我們定義組件時候在構(gòu)造函數(shù)中可以接收到props參數(shù)，并且要使用super傳到Component的構(gòu)造方法中。在整個組件的類中就可以使用成員變量props了。而props的內(nèi)容，是父元素在調(diào)用子元素時候以屬性的形式傳入的。整個props控制的就是從父元素到子元素的事件流，這樣我們在使用組件的時候就可以像函數(shù)調(diào)用一樣使用組件，像傳入?yún)?shù)一樣傳入props。

使用props時候要注意一點，props傳遞數(shù)據(jù)是單向的，數(shù)據(jù)只能從父組件傳遞到子組件，需要其它方向的數(shù)據(jù)傳遞就需要使用其他方式了。

組件從創(chuàng)建到銷毀--生命周期

生命周期這個概念在很多開發(fā)中都會接觸，react也是如此，一個react組件從創(chuàng)建運行到銷毀需要經(jīng)歷很多階段，系統(tǒng)也為我們提供了對應階段的hook方法（hook方法翻譯為鉤子方法，指的是當組件運行到對應的階段時候就會自動執(zhí)行寫在這些方法里面的邏輯），我從網(wǎng)上找到了一副描述比較清晰的圖片（侵刪）：

下面來逐一介紹這些生命周期方法以及它們說發(fā)揮的作用

getDefaultProps和getInitialState，如果使用ES6的類繼承方式定義組件是看不到這兩個方法的，它們的任務是組件加載前先獲取默認props和初始化state，在ES6的語法中我們可以在constructor中對其進行定義，注意constructor第一句必須要使用super(props)，否則會報錯。

componentWillMount，在組件渲染之前調(diào)用，整個生命周期只會調(diào)用一次，子組件的該方法會在父組件調(diào)用之后被調(diào)用，如果在該方法內(nèi)設置狀態(tài)，react會在狀態(tài)設置好之后才執(zhí)行渲染，常用在該方法里發(fā)送網(wǎng)絡請求獲取數(shù)據(jù)。

render()，組件渲染方法,此方法返回組件最終被渲染的狀態(tài)，它的作用就是渲染組件，此階段不能修改state。從圖上可以看出，除了首次渲染要調(diào)用，此方法在組件發(fā)生更新時候也會被調(diào)用，它是組件最核心的方法。

componentDidMount，在逐漸被渲染之后被調(diào)用，僅調(diào)用一次，子組件的此方法會在父組件的此方法之前調(diào)用，此方法結(jié)束后組件進入運行狀態(tài)。

componentWillReceiveProps(nextProps)，組件運行階段，當組件接收到新的props時被調(diào)用，這個函數(shù)接收一個object參數(shù)（新的props），父組件發(fā)生render的時候子組件就會調(diào)用，組件首次渲染不會觸發(fā)。

shouldComponentUpdate(nextProps, nextState)，組件運行階段，接收到新的state或props時被調(diào)用，此方法默認返回true，可以通過控制該方法返回false來阻止組件重新渲染。

componentWillUpdate，組件運行階段，當準備重新渲染組件前調(diào)用，做一些渲染前準備工作，組件首次渲染不會觸發(fā)。

componentDidUpdate，組件運行狀態(tài)，組件重新渲染之后調(diào)用，組件首次渲染不會觸發(fā)。

componentWillUnmount，在組件被卸載前調(diào)用，做一些結(jié)束前的清理工作。

以上是react生命周期的相關(guān)內(nèi)容，到此，react組件的基本概念就介紹的差不多了。

行為與交互--事件綁定

在react中綁定事件需要注意一個問題，如果是使用ES6的class方式定義的組件中事件處理函數(shù)的this默認是不會綁定的，我們需要手動綁定this指向。來看下面一個錯誤的例子：

class EventTest extends React.Component {
  clicked() {
    console.log("clicked");
  }
  render() {
    return (
      

        點我
      
    );
  }
}

點擊點我，確實能夠正常打印出clicked，看起來好像沒有問題，但是，如果試著打印一下this，就會發(fā)現(xiàn)結(jié)果是undefined。

這樣寫this沒辦法綁定，自然也就沒辦法使用各種成員變量和方法，也不能調(diào)用內(nèi)置方法了，顯然不是我們預期的，所以我們需要手動來綁定this指向，方法也很簡單：

class EventTest extends React.Component {
  clicked() {
    console.log("clicked");
  }
  render() {
    return (
      

        點我
      
    );
  }
}

只要增加bind(this)就能實現(xiàn)預期效果了，這也是一種常用的綁定this方式。除此之外還可以采用箭頭函數(shù)來自動綁定this，下面的做法也是完全可以的：

class EventTest extends React.Component {
  clicked() {
    console.log("clicked");
  }
  render() {
    return (
      
this.clicked()}>
        點我
      
    );
  }
}

把clicked作為箭頭函數(shù)返回的函數(shù)來使用，利用箭頭函數(shù)內(nèi)部自動綁定this的特性也可以實現(xiàn)this綁定。另外，還有一種寫法：

class EventTest extends React.Component {
  clicked = () => {
    console.log("clicked");
  }
  render() {
    return (
      

        點我
      
    );
  }
}

這種方法是新的ES標準中的實驗性語法，由于有babel轉(zhuǎn)譯也是可以使用的，官網(wǎng)上面也提到了這種寫法，不過由于新的標準還未成熟，所以用的人也不多。

了解了這些，react算是入了門了，接下來深入學習的路還長，虛擬DOM的原理，diff算法，css-in-js，工程化下的react項目結(jié)構(gòu)，react-router，redux，還有以后要學習的react native，后面隨著學習慢慢總結(jié)。