技術文章 » react的component是什麼

react的component是什麼

2022-12-05 18:00:09

在react中，component中文意思為「元件」，是封裝起來的具有獨立功能的UI部件；將要展示的內容，分成多個獨立部分，每一個這樣的部分，就是一個元件。元件有兩個重要的東西，一個是屬性，一個是狀態。元件的屬性是父元件給它的，儲存的是父元件對子元件的要求，在元件內部可以對屬性進行存取，但不可以修改它；元件的狀態，由元件自行定義和使用，用來儲存元件當前狀態，元件的狀態可以修改。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：Windows7系統、react18版、Dell G3電腦。

在React，元件（component），就是一個UI的單元，是封裝起來的具有獨立功能的UI部件。它的思想是，將要展示的內容，分成多個獨立部分，每一個這樣的部分，就是一個元件，就有點像android或者ios中的控制元件。

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

0.png

一、元件的基本組成部分

每個元件，其實在程式碼中提現出來就是一個類，一個最簡單的元件：

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

從上面的程式碼可以看到，元件和一般的類一樣可以定義方法。對於元件來說，render()方法是非常重要的（必須實現），就是在這個方法返回元件的介面。在render()方法中，使用了JSX來定義元件的介面。關於render()方法，後面會進一步詳述。

此外，元件還有兩個重要的東西，一個是屬性（props），一個是狀態（state）。簡單的說，元件的屬性是父元件給它的（元件之間可以巢狀），儲存的是父元件對子元件的要求，在元件內部可以對屬性進行存取（使用），但不可以修改它；元件的狀態，由元件自行定義和使用，用來儲存元件當前狀態，元件的狀態可以修改。

二、元件的生命週期

元件的生命週期大體上可以分為三個階段：展示（mounting），重新整理（updating），消失（unmounting）。
在每個階段中，又細分了幾個步驟。

1. 展示階段（Mounting）

就是元件被建立並插入檢視的階段，以下方法依次執行：

  • constructor(props)

元件建立的時候會被呼叫，在該方法內可以存取到由父元件傳來的屬性物件props。如果要重寫這個方法，必須記得先寫super(props)；否則在這個元件內部就存取不了屬性了（屬性的內容稍後詳述）。

  • componentWillMount()
  • render()
  • componentDidMount()

2. 重新整理階段（Updating）

當元件的屬性（props）和狀態（state）改變的時候會觸發元件進行重新整理，以下方法一次執行：

  • componentWillReceiveProps(nextProps)

元件的屬性變化的時候會呼叫，這個方法中nextProps就是新的屬性。如果想在該方法內更新狀態，應該先確保屬性當前值和新值不相同後再重新整理狀態。

  • shouldComponentUpdate()

這個方法返回true或者false決定元件的render()方法是否會被呼叫。

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

3. 消失階段（Unmounting）

元件被移除之後就會進入消失階段，執行以下方法：

  • componentWillUnmount()

三、元件的屬性、狀態和方法

在元件的內部，要存取自身的屬性、狀態和方法，一般需要使用到this關鍵字，表示本元件的意思。

1. 元件的方法

存取元件的方法使用格式：
this.methodName(param1，param2，…)
如，在元件內部定義了方法:

_method()
{
console.log(‘method call ! ~~~~’);
}
登入後複製

要呼叫它：
this._method();

2. 元件的屬性

上面提到，元件的屬性，是由父元件給的，從意義上理解，元件的屬性用來儲存父元件對子元件的要求。
存取元件的屬性格式：
this.props.propertyName
這裡看到，與存取元件的方法不同，這裡沒有直接在this後就直接跟屬性名，中間多了一個props。這個props其實是一個屬性物件，上面我們提到屬性是父元件給的，那麼這個props物件就相當於把父元件給的所有的屬性都封裝起來，一個props物件像這樣：

{
property1:value1,
property2:value2,
…
}
登入後複製
登入後複製

注意，在使用react的時候會經常遇到用這種形式表示的物件，也就是一個花括號內包含若干對屬性名和屬性值。
存取元件的屬性的例子：
例如元件有一個屬性height，那麼要存取它：
this.props.height;
雖然屬性不能修改，但我們能給元件屬性一個預設值，也就是說，當父元件沒有給該屬性賦值的時候，使用的一個預設值。
例如給元件CustomButton定義預設屬性：

CustomButton.defaultProps = {
  color: 'blue'
};
登入後複製

另外還可以給元件的屬性指定型別，在開發模式下這個如果父元件設定的屬性不符合子元件設定的型別的話，會輸出警告，在生產模式下就不會對型別進行檢查，例如，設定CustomButton元件的color屬性的型別為字元：

CustomButton.propTypes = {
  color: React.PropTypes.string
};
登入後複製

3. 元件的狀態

元件的狀態，就是用來儲存元件的當前狀態。
存取狀態的格式：
this.state.propertyName
例如，元件有個屬性height，那麼要存取它對應的狀態：
this.state.height;
與元件的屬性類似，這裡也沒有直接在this後跟屬性名，中間多了個state。類似的，state也是一個狀態物件，把所有屬性對應的狀態封裝起來。既然是物件，當然也可以使用上面說的「花括號內包含若干對屬性名和屬性值」的形式來表示，像這樣:

{
property1:value1,
property2:value2,
…
}
登入後複製
登入後複製

上面提到，屬性是父元件給的，不可修改，但狀態可以修改。由於狀態是一個物件，因此修改狀態，就是給this.state賦予一個新的物件：

this.state = {
propertyName1：newValue1，
propertyName2：newValue2，
…
};
登入後複製

或者使用setState()方法，這個方法會將新的、舊的狀態合併，因此只需要填入有變化的狀態就好，

this.setState({
propertyName1：newValue1，
propertyName2：newValue2，
…
});
登入後複製

例如，修改一個元件的兩個狀態height和width分別為100和200：

this.state = {
height:100,width:200,
};
登入後複製

或

this.setState({
height:100,
width:200,
});
登入後複製

四、元件的render()方法

上面提到，render()方法是專門用來返回元件介面的。從元件的生命週期可以看出，在元件第一次載入的時候，或者元件的props或state有變化的時候，render()方法都會被呼叫，也就是說這兩種情況下，元件會重畫它的介面，因此在render()方法中儘量只做有關介面的事情。
元件的介面也是由一個或多個其他的元件組成的，比如View、Button、Text等等。需要注意的是，如果當多個子元件都需要使用同一個狀態（狀態可能會改變）的時候，為了減少對狀態（屬性）的存取次數，建議在render()方法中，先用一個變數儲存該狀態的當前值，然後在各個元件中使用這個變數，而不是在各個元件中多次存取這個狀態。
例如，這裡元件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>
    );
  }
登入後複製

在上面的例子當中，return()方法內部是由的是JSX，ReactNative支援的表示介面的一種語法，類似於XML或者HTML。這個可以去查檢視。
這個例子裡，元件使用的都是this.state.value。這裡可能就存在疑惑，在元件中什麼時候應該用props，什麼時候應該用state。下面看，屬性和狀態的使用場景。

五、屬性和狀態的使用場景

在元件中應該用props還是state，取決於這個資訊是來自於元件內部還是來自於元件外部。什麼意思呢？
例如，自定義一個元件CustomView（如下圖）。CustomView包括一個輸入框元件Input和一個文字方塊元件CustomText。現在要求CustomText顯示的文字隨Input中輸入的內容變化（輸入什麼就顯示什麼）。

1.png

對於元件CustomView，其子元件CustomText的要顯示的文字來自於子元件Input，都是在CustomView的內部，因此CustomView可以用this.state.value來儲存輸入框的內容，然後CustomText就顯示this.state.value。
那麼站在元件CustomText的角度，假定CustomText內部包含一個Text元件，實際上文字是由Text元件顯示的（如下圖）：

2.png

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

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

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

render(){
     return(
        <Text>{this.props.textFromInput}</Text>
     );
}
登入後複製

這時候，只要實現每次輸入內容變化的時候更新狀態value，就可以實現CustomText的內隨輸入內容變化。上面onChange指向_inputValueChange方法，於是實現該方法：

this._inputValueChange(e){
    this.setState({
    value:e.target.value;
    });
}
登入後複製

【相關推薦：Redis視訊教學、】

以上就是react的component是什麼的詳細內容，更多請關注TW511.COM其它相關文章！