React學習—組件
阿新 • • 發佈:2017-07-25
bsp 過程 hold 初始化 create event method 區別 eth 一、定義
組件就像JavaScript的函數。組件可以接收任意輸入(稱為"props"), 並返回 React 元素,用以描述屏幕顯示內容。
二、組件的分類
1、函數式組件(無狀態組件)
它是為了創建純展示組件,這種組件只負責根據傳入的
特點:
--組件不會被實例化,整體渲染性能得到提升。因為組件被精簡成一個render方法的函數來實現的,由於是無狀態組件,所以無狀態組件就不會在有組件實例化的過程,無實例化過程也就不需要分配多余的內存,從而性能得到一定的提升。
--組件不能訪問
2、React.createClass
props
來展示,不涉及到要state
狀態的操作。在大部分React代碼中,大多數組件被寫成無狀態的組件,通過簡單組合可以構建成其他的組件等;這種通過多個簡單然後合並成一個大應用的設計模式被提倡。
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
this
對象。無狀態組件由於沒有實例化過程,所以無法訪問組件this中的對象
--組件無法訪問生命周期的方法。因為無狀態組件是不需要組件生命周期管理和狀態管理,所以底層實現這種形式的組件時是不會實現組件的生命周期方法。
--無狀態組件只能訪問輸入的props,同樣的props會得到同樣的渲染結果,不會有副作用var InputControlES5 = React.createClass({ propTypes: {//定義傳入props中的屬性各種類型 initialValue: React.PropTypes.string }, defaultProps: { //組件默認的props對象 initialValue: ‘‘ }, // 設置 initial state getInitialState: function() {//組件相關的狀態對象 return特點:與無狀態組件相比,{ text: this.props.initialValue || ‘placeholder‘ }; }, handleChange: function(event) { this.setState({ //this represents react component instance text: event.target.value }); }, render: function() { return ( <div> Type something: <input onChange={this.handleChange} value={this.state.text} /> </div> ); } }); InputControlES6.propTypes = { initialValue: React.PropTypes.string }; InputControlES6.defaultProps = { initialValue: ‘‘ };
React.createClass
和後面要描述的React.Component
都是創建有狀態的組件,這些組件是要被實例化的,並且可以訪問組件的生命周期方法。但是隨著React的發展,React.createClass
形式自身的問題暴露出來:React.createClass會自綁定函數方法(不像React.Component只綁定需要關心的函數)導致不必要的性能開銷,增加代碼過時的可能性。
3、React.Component
React.Component
是以ES6的形式來創建react的組件的,是React目前極為推薦的創建有狀態組件的方式,最終會取代React.createClass
形式;相對於 React.createClass
可以更好實現代碼復用。
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> ); } } InputControlES6.propTypes = { initialValue: React.PropTypes.string }; InputControlES6.defaultProps = { initialValue: ‘‘ };三、React.createClass與React.Component區別 1、
React.createClass
創建的組件,其每一個成員函數的this都有React自動綁定,任何時候使用,直接使用this.method
即可,函數中的this
會被正確設置。 React.Component
創建的組件,其成員函數不會自動綁定this,需要開發者手動綁定,否則this不能獲取當前組件實例對象。
2、React.createClass
在創建組件時,有關組件props的屬性類型及組件默認的屬性會作為組件實例的屬性來配置,其中defaultProps是使用getDefaultProps
的方法來獲取默認組件屬性的。React.Component
在創建組件時配置這兩個對應信息時,他們是作為組件類的屬性,不是組件實例的屬性,也就是所謂的類的靜態屬性來配置的。
const TodoItem = React.createClass({ propTypes: { // as an object name: React.PropTypes.string }, getDefaultProps(){ // return a object return { name: ‘‘ } } render(){ return <div></div> } })
class TodoItem extends React.Component { static propTypes = {//類的靜態屬性 name: React.PropTypes.string }; static defaultProps = {//類的靜態屬性 name: ‘‘ }; ... }3、
React.createClass
創建的組件,其狀態state是通過getInitialState
方法來配置組件相關的狀態;
React.Component
創建的組件,其狀態state是在constructor
中像初始化組件屬性一樣聲明的。
const TodoItem = React.createClass({ // return an object getInitialState(){ return { isEditing: false } } render(){ return <div></div> } })
class TodoItem extends React.Component{ constructor(props){ super(props); this.state = { // define this.state in constructor isEditing: false } } render(){ return <div></div> } }四、如何選擇 1、只要有可能,盡量使用無狀態組件創建形式。 2、否則(如需要state、生命周期方法等),使用`React.Component`這種es6形式創建組件
React學習—組件