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, 推薦使用普通函數(非箭頭函數)而不是類