React筆記_(6)_react文法5

標籤：規範性   com   const   port   one   .com   targe   document   實現   

react的版本

目前主要的react有 ES5，ES6.也有ES5和ES6混合編寫的。比較混亂。

react官方提倡用ES6。

 

說到這裡，就需要提到一個概念——mixin

mixin在es6中被摒棄掉了。

mixin：

簡單來講，就是部分公用的代碼，提取出來作為一個獨立的木塊，

利用混入的方式來使用。這就是mixin。

es5裡面，聲明一個mixin單例對象，直接以數組方式插到組件使用即可；

es6不提倡這樣的寫法，而是使用高階組件的方式實現。

 高階組件：

     其實就是把一個類作為參數丟到另一個類（修飾類）中，

     在這個類中將上一個類增加一點東西，然後再return返回去，

     等於把上一個類的功能修飾增強了。

 

哎呀。概念好麻煩。還是看看代碼怎麼樣實現吧。

首先說明一下實現思路。

1.我們用箭頭函數，將組件類作為參數丟進去。2.在這個函數內部，聲明一個類，繼承傳進來的組件類。3.加入新的屬性和方法，然後返回類。

　　

看下實現：

import React,{ Component } from ‘react‘;import ReactDOM from ‘react-dom‘;//待增強類class MyTest extends Component{    constructor(props){        super(props);    }    render(){        return (<button onClick={this.show.bind(this,this.props)}>click</button>);    }}//修飾函數，將類作為參數傳入。let IntervalEnhance = myComponent => {//聲明一個內部類。// 注意，這個內部類不能有render方法，否則會將原類中的render覆蓋。    class ES6_Mixin extends myComponent {        componentWillMount() {            console.log("渲染前");            this.timer = setInterval(function(){                console.log(‘不斷列印中.....‘);            },500);        }       componentWillUnmount(){              console.log("銷毀啦！");             clearInterval(this.timer);       }        show(obj){            console.log(obj);        }    }//修飾後返回return ES6_Mixin;};var EnhancedTest = IntervalEnhance(MyTest);ReactDOM.render(<EnhancedTest myname={"zhangwei"} />,document.getElementById(‘app‘));//10s後銷毀setTimeout(function(){    ReactDOM.unmountComponentAtNode(document.getElementById("app"));},10000);

 

說明：

1.MyTest這個類，被增強了計時器功能和show()方法。最後，我們用增強後的類作為新組件類，渲染到頁面上。

2.es5版的mixin對象裡如果有相同的周期函數，是可以先載入mixin的，然後再載入組件本身的，之間並不會有覆蓋

3.高階組件的做法弱化了之前mixin的功能。

4.新式寫法增強了代碼的規範性

 

原始碼說明:點此下載

 

React筆記_(6)_react文法5