react之組件類型

BicycleWarrior 發(fā)布于2019-08-23 18:36 / 2200人閱讀

摘要：一構(gòu)造函數(shù)組件構(gòu)造函數(shù)組件，可接受外部傳入的參數(shù)，生成并返回一個(gè)元素偽。二關(guān)鍵字組件中組件的書寫方式跟中類的書寫方式非常接近，可以通過進(jìn)行創(chuàng)建。如上圖，監(jiān)聽的事件，實(shí)時(shí)更改的值并展示。

一、構(gòu)造函數(shù)組件
構(gòu)造函數(shù)組件，可接受外部傳入的參數(shù)props，生成并返回一個(gè)React元素（偽DOM）。
例如，如下，Greeting作為一個(gè)組件，接受傳入的參數(shù)name,并返回一個(gè)內(nèi)容已填充的p標(biāo)簽。

function Greeting (props) {
   return (
       {props.name},how are you? 
   )
}

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

二、class關(guān)鍵字組件
react中class組件的書寫方式跟es6中類的書寫方式非常接近，可以通過React.Compnent進(jìn)行創(chuàng)建。與函數(shù)組件不同的是，該組件可以進(jìn)行復(fù)雜邏輯的處理，既可以接受外部參數(shù)props，也可以擁有自己的state，用于組件內(nèi)的通信。

class HighGreeting extends React.Component {
   constructor(props){
     super(props);
     this.state={
       inputValue: this.props.name
     } 
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   render () {
     return (
        
        {this.state.inputValue},how are you?
     )
   }
   handleInputChange(e){
      let value = e.target.value;
      this.setState({
         inputValue: value
      })
   }
} 

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

上面的組件，接收props參數(shù)作為初始值，當(dāng)用戶輸入時(shí)，會(huì)實(shí)時(shí)更新。

class關(guān)鍵字組件內(nèi)部可以定義state,相當(dāng)于vue組件內(nèi)的data,更改時(shí)需要調(diào)用this.setState,每次調(diào)用該方法時(shí)，都會(huì)執(zhí)行render方法，自動(dòng)更新組件。如上圖，監(jiān)聽input的onchange事件，實(shí)時(shí)更改inputValue的值并展示。

需要注意的是，props不僅可以傳遞值，還可以傳遞函數(shù)。（這一點(diǎn)跟vue不一樣，后面的文章會(huì)再細(xì)講。）