react之組件類型

1、構造函數組件
構造函數組件，可接受外部傳入的參數props，生成並返回一個React元素（僞DOM）。
例如，以下，Greeting做爲一個組件，接受傳入的參數name,並返回一個內容已填充的p標籤。

function Greeting (props) {
   return (
      <p> {props.name},how are you? </p>
   )
}

const element = <Greeting name="Agnes" />
ReactDOM.render(
  element,
  document.getElementById('root')
)

2、class關鍵字組件
react中class組件的書寫方式跟es6中類的書寫方式很是接近，能夠經過React.Compnent進行建立。與函數組件不一樣的是，該組件能夠進行復雜邏輯的處理，既能夠接受外部參數props，也能夠擁有本身的state，用於組件內的通訊。

class HighGreeting extends React.Component {
   constructor(props){
     super(props);
     this.state={
       inputValue: this.props.name
     } 
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   render () {
     return (
        <input type="text" onChange="handleInputChange"/>
        <p>{this.state.inputValue},how are you?</p>
     )
   }
   handleInputChange(e){
      let value = e.target.value;
      this.setState({
         inputValue: value
      })
   }
} 

const element = <HighGreeting name="Agnes" />
ReactDOM.render(
  element,
  document.getElementById('root')
)

上面的組件，接收props參數做爲初始值，當用戶輸入時，會實時更新。

1. class關鍵字組件內部能夠定義state,至關於vue組件內的data,更改時須要調用this.setState,每次調用該方法時，都會執行render方法，自動更新組件。如上圖，監聽input的onchange事件，實時更改inputValue的值並展現。
2. 須要注意的是，props不只能夠傳遞值，還能夠傳遞函數。（這一點跟vue不同，後面的文章會再細講。）