react中類組件和函數式組件中有什麼不一樣?

20190306期

react中類組件和函數式組件中有什麼不一樣?

在react中建立組件的形式有三種

• 純函數式定義的無狀態組件
• React.createClass 定義的組件
• Extends React.Component 定義的組件

今天咱們要聊的是純函數式定義的無狀態組件及類組件的到底有什麼不一樣, 分別在什麼場景下適合使用

首先咱們來看一下用上述方法如何來建立一個組件

Extends React.Component 定義的組件

React.Component是以ES6的形式來建立react的組件的，是React目前極爲推薦的建立有狀態組件的方式，最終會取代React.createClass形式

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.initialValue || 'placeholder'
        };
        // 手動綁定this
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        return (
            <div>
                <input value={this.state.text} onChange={this.handleChange}/>
            </div>
        );
    }
}
Demo.propTypes = {
    initialValue: React.PropTypes.string
}
複製代碼

純函數式定義的無狀態組件

純函數組件的特色:

• 組件不會被實例化,總體渲染性能獲得提高
• 組件不能訪問this對象
• 組件沒法訪問生命週期的方法
• 無狀態組件只能訪問輸入的props,無反作用

function DemoComponent(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<DemoComponent name="JS每日一題" />, mountNode) 
複製代碼

使用場景

以類形式建立的組件不用多說，該怎麼用還怎麼用, 這裏說一純函數組件, 純函數組件被鼓勵在大型項目中儘量以簡單的寫法來分割本來龐大的組件，將來React也會這種面向無狀態組件在譬如無心義的檢查和內存分配領域進行一系列優化，因此只要有可能，儘可能使用無狀態組件

總結

• react中有三種建立組件的形式
• 純函數不會被實例化，不能訪問this，沒有生命週期
• 儘量的使用純函數拆分複雜型組件