react的component是什么

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

前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。

在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è)類，一個(gè)最簡(jiǎn)單的組件：

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

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

此外，組件還有兩個(gè)重要的東西，一個(gè)是屬性（props），一個(gè)是狀態(tài)（state）。簡(jiǎn)單的說，組件的屬性是父組件給它的（組件之間可以嵌套），存儲(chǔ)的是父組件對(duì)子組件的要求，在組件內(nèi)部可以對(duì)屬性進(jì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)可以訪問到由父組件傳來(lái)的屬性對(duì)象props。如果要重寫這個(gè)方法，必須記得先寫super(props)；否則在這個(gè)組件內(nèi)部就訪問不了屬性了（屬性的內(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ài)，應(yīng)該先確保屬性當(dāng)前值和新值不相同后再刷新狀態(tài)。

• shouldComponentUpdate()

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

• componentWillUpdate()
• render()
• componentDidUpdate()

3. 消失階段（Unmounting）

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

• componentWillUnmount()

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

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

1. 組件的方法

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

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

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

2. 組件的屬性

上面提到，組件的屬性，是由父組件給的，從意義上理解，組件的屬性用來(lái)存儲(chǔ)父組件對(duì)子組件的要求。
訪問組件的屬性格式：
this.props.propertyName
這里看到，與訪問組件的方法不同，這里沒有直接在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ì)屬性名和屬性值。
訪問組件的屬性的例子：
例如組件有一個(gè)屬性height，那么要訪問它：
this.props.height;
雖然屬性不能修改，但我們能給組件屬性一個(gè)默認(rèn)值，也就是說，當(dāng)父組件沒有給該屬性賦值的時(shí)候，使用的一個(gè)默認(rèn)值。
例如給組件CustomButton定義默認(rèn)屬性：

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

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

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

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

組件的狀態(tài)，就是用來(lái)存儲(chǔ)組件的當(dāng)前狀態(tài)。
訪問狀態(tài)的格式：
this.state.propertyName
例如，組件有個(gè)屬性height，那么要訪問它對(duì)應(yīng)的狀態(tài)：
this.state.height;
與組件的屬性類似，這里也沒有直接在this后跟屬性名，中間多了個(gè)state。類似的，state也是一個(gè)狀態(tài)對(duì)象，把所有屬性對(duì)應(yīng)的狀態(tài)封裝起來(lái)。既然是對(duì)象，當(dāng)然也可以使用上面說的“花括號(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()方法是專門用來(lái)返回組件界面的。從組件的生命周期可以看出，在組件第一次加載的時(shí)候，或者組件的props或state有變化的時(shí)候，render()方法都會(huì)被調(diào)用，也就是說這兩種情況下，組件會(huì)重畫它的界面，因此在render()方法中盡量只做有關(guān)界面的事情。
組件的界面也是由一個(gè)或多個(gè)其他的組件組成的，比如View、Button、Text等等。需要注意的是，如果當(dāng)多個(gè)子組件都需要使用同一個(gè)狀態(tài)（狀態(tài)可能會(huì)改變）的時(shí)候，為了減少對(duì)狀態(tài)（屬性）的訪問次數(shù)，建議在render()方法中，先用一個(gè)變量存儲(chǔ)該狀態(tài)的當(dāng)前值，然后在各個(gè)組件中使用這個(gè)變量，而不是在各個(gè)組件中多次訪問這個(gè)狀態(tài)。
例如，這里組件Text、Input、Image都是用到了this.state.value，推薦的寫法是：

 render() {     const value = this.state.value;     return (     <View>       <Text>{value}</Text>       <Input value={value} onChange={this.handleChange} />       <Image source = {{ uri : value }}/>     </View>     );   }

在上面的例子當(dāng)中，return()方法內(nèi)部是由的是JSX，ReactNative支持的表示界面的一種語(yǔ)法，類似于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。現(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組件顯示的（如下圖）：

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

render(){      var value = this.state.value;      return(         <CustomText textFromInput = {value}/>         <Input onChange = {this._inputValueChange}/>      ); }

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

render(){      return(         <Text>{this.props.textFromInput}</Text>      ); }

這時(shí)候，只要實(shí)現(xiàn)每次輸入內(nèi)容變化的時(shí)候更新狀態(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;     }); }

【