react 創建組件的幾種方式以及特點

1.無狀態函數式組件

它是爲了創建純展示組件,這種組件只負責根據傳入的props來展示,不涉及到要state狀態的操作。特點:

1.1. 組件不會被實例化,整體渲染性能得到提升

因爲組件被精簡成一個render方法的函數來實現的,由於是無狀態組件,所以無狀態組件就不會在有組件實例化的過程,無實例化過程也就不需要分配多餘的內存,從而性能得到一定的提升。

1.2. 組件不能訪問this對象

無狀態組件由於沒有實例化過程,所以無法訪問組件this中的對象,例如:this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來創建組件

1.3. 組件無法訪問生命週期的方法

因爲無狀態組件是不需要組件生命週期管理和狀態管理,所以底層實現這種形式的組件時是不會實現組件的生命週期方法。所以無狀態組件是不能參與組件的各個生命週期管理的。

1.4. 無狀態組件只能訪問輸入的props,同樣的props會得到同樣的渲染結果,不會有副作用

具體的創建形式如下:

function HelloComponent(props) {

  return <div>Hello {props.name}</div>

}

2 React.createClass 不建議使用

3.class extends React.Component

是以ES6的形式來創建react的組件的,是React目前極爲推薦的創建有狀態組件的方式,格式如下:

class InputControlES6 extends React.Component { 
constructor(props) { 
super(props); 
// 設置 initial state 
this.state = { 
text: props.initialValue || 'placeholder' 
}; 
// ES6 類中函數必須手動綁定 也可以使用箭頭函數
this.handleChange = this.handleChange.bind(this); 
} 
handleChange(event) { 
this.setState({ text: event.target.value }); 
} 
render() { 
return (
<div> Type something: <input onChange={this.handleChange}   value={this.state.text}  /></div> ); 
} 
}

 

4.使用場景

1、 如果組件有內部狀態或者是refs, 推薦使用 class extends React.Component 

 

2、 如果組件沒有狀態或是沒有引用refs, 推薦使用普通函數(非箭頭函數)而不是類

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章