今天小編給大家分享一下React創(chuàng)建組件的方法的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、成都西信服務(wù)器托管、云服務(wù)器、虛擬主機(jī)、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗(yàn)，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、虛擬主機(jī)、域名與空間、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

組件介紹

組件(Components) 讓你可以將用戶界面分成獨(dú)立的，可復(fù)用的小部件，并可以對每個部件進(jìn)行單獨(dú)的設(shè)計(jì)。

從定義上來說， 組件就像JavaScript的函數(shù)。組件可以接收任意輸入(稱為”props”)， 并返回 React 元素，用以描述屏幕顯示內(nèi)容。

Props ， 即屬性(Property)， 在代碼中寫作 props，故可用 props 指代 properties。
react中有兩種組件：類組件（class components）、函數(shù)組件（function components）

創(chuàng)建類組件

類組件的定義有如下要求：

• 類組件需要繼承自 React.Component

• 類組件必須實(shí)現(xiàn)render函數(shù)

在ES6之前，可以通過create-react-class 模塊來定義類組件，但是目前官網(wǎng)建議我們使用ES6的class類定義。

使用class定義一個組件：

class App extends Component {
  constructor() {
    super()
    this.state = {}
  }

  render() {
    return 
Hello App
  }
}

我們來詳細(xì)分析一下類組件有哪幾個部分

• constructor：這是類組件的構(gòu)造函數(shù)，是可選的，我們通常在constructor中初始化一些數(shù)據(jù)；

• this.state：我們在constructor中給類組件加入state屬性，你可以理解為組件中有一個state對象，其中包含著各種屬性，用于維護(hù)組件內(nèi)部的數(shù)據(jù)。同時你可以通過this.state.<屬性名>訪問該屬性；

• render()： 該方法是 class 組件中唯一必須實(shí)現(xiàn)的方法，類組件通過render()返回組件的顯示內(nèi)容；

關(guān)于 state

我們可以通過this.state給類組件添加數(shù)據(jù)對象，我們可以通過this.state.<屬性名>去訪問我們setState中的屬性。

constructor(props) {
    super(props);
    this.state = {
      name:"xhs-rookies"
    }
  }

render(){
    return 
{this.state.name}
  }

但是我們想要修改上述例子中的name屬性的時候，則必須通過react給我們規(guī)定好的setState()方法，去給state添加或者修改其中的數(shù)值。

this.state.name = 'new xhs-rookies' //錯誤的方式，不允許采用
this.setState({ name: 'new xhs-rookies' }) //正確的方式

簡單點(diǎn)來說，在 react 中頁面是通過數(shù)據(jù)進(jìn)行渲染，使用setState()更新的數(shù)據(jù)，react 會幫我們執(zhí)行render()去更新頁面，從而將頁面中用到 state 中的數(shù)據(jù)全部更新。

關(guān)于 render

當(dāng) render 被調(diào)用時，它會檢查 this.props 和 this.state 的變化并返回很多類型，很多時候我們選擇讓該方法返回 React 元素，然后交由 React 去渲染展示：

React 元素：

• 通常通過 JSX 創(chuàng)建。

• 例如，

  會被 React 渲染為 DOM 節(jié)點(diǎn)， 會被 React 渲染為自定義組件；

• 無論是

  還是 均為 React 元素。

詳細(xì)關(guān)于 render() 方法的內(nèi)容請見React.Component - Render)

創(chuàng)建函數(shù)組件

函數(shù)組件是使用 function 來進(jìn)行定義的函數(shù)，只是這個函數(shù)會返回和類組件中 render 函數(shù)返回一樣的內(nèi)容。

跟類組件相比，函數(shù)組件有自己的特點(diǎn)：

• 沒有生命周期，也會被更新并掛載，但是沒有生命周期函數(shù)；

• 沒有 this(組件實(shí)例）；

• 沒有內(nèi)部狀態(tài)（state）；

我們來定義一個函數(shù)組件：

export default function App() {
  return 
xhs rookies
}

渲染組件

在前幾篇中, 我們只遇到代表 DOM 標(biāo)簽的 React 元素：

const element = 

然而，元素也可以代表用戶定義的組件：

const element = 

當(dāng) React 遇到一個代表用戶定義組件的元素時，它將 JSX 屬性以一個單獨(dú)對象的形式傳遞給相應(yīng)的組件。 我們將其稱為 “props” 對象。

比如, 以下代碼在頁面上渲染“xhs rookies”：

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

const element = 
ReactDOM.render(element, document.getElementById('root'))

我們簡單解釋一下上面這個例子:

• 我們調(diào)用了 ReactDOM.render() 方法并向其中傳入了 元素。

• React 調(diào)用 Welcome 組件，并向其中傳入了 {name: 'xhs rookies'} 作為 props 對象。

• Welcome 組件返回

  xhs rookies

  。

• React DOM 迅速更新 DOM ，使其顯示為

  xhs rookies

  。

注意： 組件名稱總是以大寫字母開始。

舉例來說,

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

function App() {
  return (
    

      
      
      
    
  )
}

 
ReactDOM.render(, document.getElementById('root'))

function Comment(props) {
  return (
    
      
        
        {props.author.name}