本文小編為大家詳細(xì)介紹“react的component怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react的component怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、臨泉網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

在react中，component中文意思為“組件”，是封裝起來(lái)的具有獨(dú)立功能的UI部件；將要展示的內(nèi)容，分成多個(gè)獨(dú)立部分，每一個(gè)這樣的部分，就是一個(gè)組件。組件有兩個(gè)重要的東西，一個(gè)是屬性，一個(gè)是狀態(tài)。組件的屬性是父組件給它的，存儲(chǔ)的是父組件對(duì)子組件的要求，在組件內(nèi)部可以對(duì)屬性進(jìn)行訪(fǎng)問(wèn)，但不可以修改它；組件的狀態(tài)，由組件自行定義和使用，用來(lái)存儲(chǔ)組件當(dāng)前狀態(tài)，組件的狀態(tài)可以修改。

在React，組件（component），就是一個(gè)UI的單元，是封裝起來(lái)的具有獨(dú)立功能的UI部件。它的思想是，將要展示的內(nèi)容，分成多個(gè)獨(dú)立部分，每一個(gè)這樣的部分，就是一個(gè)組件，就有點(diǎn)像android或者ios中的控件。

組件就是頁(yè)面上的一部分，大大小小的各種組件拼在一起就變成了一個(gè)完整的頁(yè)面，就像我們玩的拼圖，需要一塊一塊的拼接在一起才能變成一副完整的拼圖。

一、組件的基本組成部分

每個(gè)組件，其實(shí)在代碼中提現(xiàn)出來(lái)就是一個(gè)類(lèi)，一個(gè)最簡(jiǎn)單的組件：

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

從上面的代碼可以看到，組件和一般的類(lèi)一樣可以定義方法。對(duì)于組件來(lái)說(shuō)，render()方法是非常重要的（必須實(shí)現(xiàn)），就是在這個(gè)方法返回組件的界面。在render()方法中，使用了JSX來(lái)定義組件的界面。關(guān)于render()方法，后面會(huì)進(jìn)一步詳述。

此外，組件還有兩個(gè)重要的東西，一個(gè)是屬性（props），一個(gè)是狀態(tài)（state）。簡(jiǎn)單的說(shuō)，組件的屬性是父組件給它的（組件之間可以嵌套），存儲(chǔ)的是父組件對(duì)子組件的要求，在組件內(nèi)部可以對(duì)屬性進(jìn)行訪(fǎng)問(wèn)（使用），但不可以修改它；組件的狀態(tài)，由組件自行定義和使用，用來(lái)存儲(chǔ)組件當(dāng)前狀態(tài)，組件的狀態(tài)可以修改。

二、組件的生命周期

組件的生命周期大體上可以分為三個(gè)階段：展示（mounting），刷新（updating），消失（unmounting）。
在每個(gè)階段中，又細(xì)分了幾個(gè)步驟。

1. 展示階段（Mounting）

就是組件被創(chuàng)建并插入視圖的階段，以下方法依次執(zhí)行：

• constructor(props)

組件創(chuàng)建的時(shí)候會(huì)被調(diào)用，在該方法內(nèi)可以訪(fǎng)問(wèn)到由父組件傳來(lái)的屬性對(duì)象props。如果要重寫(xiě)這個(gè)方法，必須記得先寫(xiě)super(props)；否則在這個(gè)組件內(nèi)部就訪(fǎng)問(wèn)不了屬性了（屬性的內(nèi)容稍后詳述）。

• componentWillMount()

• render()

• componentDidMount()

2. 刷新階段（Updating）

當(dāng)組件的屬性（props）和狀態(tài)（state）改變的時(shí)候會(huì)觸發(fā)組件進(jìn)行刷新，以下方法一次執(zhí)行：

• componentWillReceiveProps(nextProps)

組件的屬性變化的時(shí)候會(huì)調(diào)用，這個(gè)方法中nextProps就是新的屬性。如果想在該方法內(nèi)更新?tīng)顟B(tài)，應(yīng)該先確保屬性當(dāng)前值和新值不相同后再刷新?tīng)顟B(tài)。

• shouldComponentUpdate()

這個(gè)方法返回true或者false決定組件的render()方法是否會(huì)被調(diào)用。

• componentWillUpdate()

• render()

• componentDidUpdate()

3. 消失階段（Unmounting）

組件被移除之后就會(huì)進(jìn)入消失階段，執(zhí)行以下方法：

• componentWillUnmount()

三、組件的屬性、狀態(tài)和方法

在組件的內(nèi)部，要訪(fǎng)問(wèn)自身的屬性、狀態(tài)和方法，一般需要使用到this關(guān)鍵字，表示本組件的意思。

1. 組件的方法

訪(fǎng)問(wèn)組件的方法使用格式：
this.methodName(param1，param2，…)
如，在組件內(nèi)部定義了方法:

_method()
{
console.log(‘method call ! ~~~~’);
}

要調(diào)用它：
this._method();

2. 組件的屬性

上面提到，組件的屬性，是由父組件給的，從意義上理解，組件的屬性用來(lái)存儲(chǔ)父組件對(duì)子組件的要求。
訪(fǎng)問(wèn)組件的屬性格式：
this.props.propertyName
這里看到，與訪(fǎng)問(wèn)組件的方法不同，這里沒(méi)有直接在this后就直接跟屬性名，中間多了一個(gè)props。這個(gè)props其實(shí)是一個(gè)屬性對(duì)象，上面我們提到屬性是父組件給的，那么這個(gè)props對(duì)象就相當(dāng)于把父組件給的所有的屬性都封裝起來(lái)，一個(gè)props對(duì)象像這樣：

{
property1:value1,
property2:value2,
…
}

注意，在使用react的時(shí)候會(huì)經(jīng)常遇到用這種形式表示的對(duì)象，也就是一個(gè)花括號(hào)內(nèi)包含若干對(duì)屬性名和屬性值。
訪(fǎng)問(wèn)組件的屬性的例子：
例如組件有一個(gè)屬性height，那么要訪(fǎng)問(wèn)它：
this.props.height;
雖然屬性不能修改，但我們能給組件屬性一個(gè)默認(rèn)值，也就是說(shuō)，當(dāng)父組件沒(méi)有給該屬性賦值的時(shí)候，使用的一個(gè)默認(rèn)值。
例如給組件CustomButton定義默認(rèn)屬性：

CustomButton.defaultProps = {
  color: 'blue'
};

另外還可以給組件的屬性指定類(lèi)型，在開(kāi)發(fā)模式下這個(gè)如果父組件設(shè)置的屬性不符合子組件設(shè)定的類(lèi)型的話(huà)，會(huì)輸出警告，在生產(chǎn)模式下就不會(huì)對(duì)類(lèi)型進(jìn)行檢查，例如，設(shè)定CustomButton組件的color屬性的類(lèi)型為字符：

CustomButton.propTypes = {
  color: React.PropTypes.string
};

3. 組件的狀態(tài)

組件的狀態(tài)，就是用來(lái)存儲(chǔ)組件的當(dāng)前狀態(tài)。
訪(fǎng)問(wèn)狀態(tài)的格式：
this.state.propertyName
例如，組件有個(gè)屬性height，那么要訪(fǎng)問(wèn)它對(duì)應(yīng)的狀態(tài)：
this.state.height;
與組件的屬性類(lèi)似，這里也沒(méi)有直接在this后跟屬性名，中間多了個(gè)state。類(lèi)似的，state也是一個(gè)狀態(tài)對(duì)象，把所有屬性對(duì)應(yīng)的狀態(tài)封裝起來(lái)。既然是對(duì)象，當(dāng)然也可以使用上面說(shuō)的“花括號(hào)內(nèi)包含若干對(duì)屬性名和屬性值”的形式來(lái)表示，像這樣:

{
property1:value1,
property2:value2,
…
}

上面提到，屬性是父組件給的，不可修改，但狀態(tài)可以修改。由于狀態(tài)是一個(gè)對(duì)象，因此修改狀態(tài)，就是給this.state賦予一個(gè)新的對(duì)象：

this.state = {
propertyName1：newValue1，
propertyName2：newValue2，
…
};

或者使用setState()方法，這個(gè)方法會(huì)將新的、舊的狀態(tài)合并，因此只需要填入有變化的狀態(tài)就好，

this.setState({
propertyName1：newValue1，
propertyName2：newValue2，
…
});

例如，修改一個(gè)組件的兩個(gè)狀態(tài)height和width分別為100和200：

this.state = {
height:100,width:200,
};

或

this.setState({
height:100,
width:200,
});

四、組件的render()方法

上面提到，render()方法是專(zhuān)門(mén)用來(lái)返回組件界面的。從組件的生命周期可以看出，在組件第一次加載的時(shí)候，或者組件的props或state有變化的時(shí)候，render()方法都會(huì)被調(diào)用，也就是說(shuō)這兩種情況下，組件會(huì)重畫(huà)它的界面，因此在render()方法中盡量只做有關(guān)界面的事情。
組件的界面也是由一個(gè)或多個(gè)其他的組件組成的，比如View、Button、Text等等。需要注意的是，如果當(dāng)多個(gè)子組件都需要使用同一個(gè)狀態(tài)（狀態(tài)可能會(huì)改變）的時(shí)候，為了減少對(duì)狀態(tài)（屬性）的訪(fǎng)問(wèn)次數(shù)，建議在render()方法中，先用一個(gè)變量存儲(chǔ)該狀態(tài)的當(dāng)前值，然后在各個(gè)組件中使用這個(gè)變量，而不是在各個(gè)組件中多次訪(fǎng)問(wèn)這個(gè)狀態(tài)。
例如，這里組件Text、Input、Image都是用到了this.state.value，推薦的寫(xiě)法是：

 render() {
    const value = this.state.value;
    return (
    
      {value}
      
      
    
    );
  }

在上面的例子當(dāng)中，return()方法內(nèi)部是由的是JSX，ReactNative支持的表示界面的一種語(yǔ)法，類(lèi)似于XML或者HTML。這個(gè)可以去查查看。
這個(gè)例子里，組件使用的都是this.state.value。這里可能就存在疑惑，在組件中什么時(shí)候應(yīng)該用props，什么時(shí)候應(yīng)該用state。下面看，屬性和狀態(tài)的使用場(chǎng)景。

五、屬性和狀態(tài)的使用場(chǎng)景

在組件中應(yīng)該用props還是state，取決于這個(gè)信息是來(lái)自于組件內(nèi)部還是來(lái)自于組件外部。什么意思呢？
例如，自定義一個(gè)組件CustomView（如下圖）。CustomView包括一個(gè)輸入框組件Input和一個(gè)文本框組件CustomText?，F(xiàn)在要求CustomText顯示的文本隨Input中輸入的內(nèi)容變化（輸入什么就顯示什么）。

對(duì)于組件CustomView，其子組件CustomText的要顯示的文本來(lái)自于子組件Input，都是在CustomView的內(nèi)部，因此CustomView可以用this.state.value來(lái)存儲(chǔ)輸入框的內(nèi)容，然后CustomText就顯示this.state.value。
那么站在組件CustomText的角度，假定CustomText內(nèi)部包含一個(gè)Text組件，實(shí)際上文本是由Text組件顯示的（如下圖）：

為了滿(mǎn)足組件CustomText的文本隨輸入框的內(nèi)容改變，就要求CustomView要將輸入框的內(nèi)容傳到CustomText內(nèi)部，這樣CustomText的子組件Text才可以訪(fǎng)問(wèn)到。這就需要用到屬性。如果CustomView通過(guò)屬性textFromInput傳給CustomText的話(huà)，在CustomText內(nèi)部，就可以通過(guò)this.props.textFromInput訪(fǎng)問(wèn)到。
所以CustomView的render()方法應(yīng)該是這樣的：

render(){
     var value = this.state.value;
     return(
        
        
     );
}

CustomText的render()方法應(yīng)該是這樣的：

render(){
     return(
        {this.props.textFromInput}
     );
}

這時(shí)候，只要實(shí)現(xiàn)每次輸入內(nèi)容變化的時(shí)候更新?tīng)顟B(tài)value，就可以實(shí)現(xiàn)CustomText的內(nèi)隨輸入內(nèi)容變化。上面onChange指向_inputValueChange方法，于是實(shí)現(xiàn)該方法：

this._inputValueChange(e){
    this.setState({
    value:e.target.value;
    });
}

讀到這里，這篇“react的component怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。