React學習過程（二）

父子組件傳值

父組件經過屬性（A）向子組件傳值（可是記住只能傳值，不能修改這個值）

子組件接收：

this.props.A
複製代碼

子組件操做父組件的數據：經過父組件向子組件傳遞方法，子組件調用這個方法來間接操做這個數據 ！！！注意加上.bind（this）

PropTypes 和 DefaultProps

PropTypes：對傳入參數作校驗

TodoItem.propTypes = {
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number
}
複製代碼

DefaultProps：設置屬性默認值

props，state與render函數

當組件的state或者props發生改變時，render函數就會從新執行。

當父組件的render函數被運行時，它的子組件的render都將被從新執行一次

react中的虛擬DOM

提升性能緣由： 減小了對真實dom的建立以及真實dom的對比，取而代之建立和對比的都是js對象

1.state數據

2.JSX模板

3.數據+模板 結合，生成虛擬DOM，（虛擬dom就是一個JS對象，用它來描述真實DOM）建立js對象損耗性能很小

4.用虛擬DOM的結構生成真實的DOM，來顯示

5.state發生變化

6.生成新的虛擬dom

7.比較原始虛擬dom和新的虛擬dom區別，找到區別直接在真實的dom中改

渲染成真實DOM過程

JSX -> createElement -> 虛擬DOM(js對象) -> 真實的DOM

虛擬DOM帶來的好處

1.性能提高

2.使得跨端應用得以實現（不只在瀏覽器中運行，還能在原生應用組件使用）

關於ref

ref是在react中直接獲取dom元素的時候使用，通常在動畫中須要操做dom

！！！另外setstate和ref合用時，dom獲取並不及時，由於setstate是異步的，若是但願頁面更新後再去獲取dom，必定要把獲取dom的語法放在setstate第二個參數的函數中，由於他是一個回調函數

react中的生命週期函數

初始化

constructor裏去作setup props和state

Mounting過程：

componentWillMount:在組件即將被掛載到頁面的時刻自動執行

接着執行render

compomentDidMount : 組件被掛載到頁面後，自動被執行

Updation（更新）

當props和state改變時會執行

shouldComponentUpdate:組件被更新以前會自動被執行，而且會返回一個布爾值，true就是更新，false就是不要被更新。

如圖所示

componentWillUpdate:組件被更新以前會被執行，可是她在shouldComponentUpdate以後被執行,若是shouldComponentUpdate返回true它才執行，若是返回false就不被執行

componentDidUpdate：組件更新完以後會被執行

componentWillReceiveProps:一個組件要從父組件接受參數，只要父組件的render函數被從新執行了，子組件的這個生命週期函數就會被執行

Unmounting過程

componentWillUnmount:當組件即將被從頁面中剔除的時候會被執行。

生命週期函數的使用場景

shouldComponentUpdate：

提高組件性能，避免作無謂的render函數從新執行

shouldComponentUpdate(nextProps,nextState){  //接收兩個參數
    if(nextProps.XXX !== this.props.XXX){
        return true;   //也就是說只有當XXX發生改變時咱們纔去從新渲染
    }else{
        return false;  //不然不渲染
    }
}
複製代碼

componentDidMount

由於在整個過程當中只執行一次，因此把ajax數據請求放在這裏是比較合適的，由於ajax請求數據只一次就行了。

另外在react中使用ajax也是用axios

componentDidMount(){
    axios.get('/api/todolist')
    .then((res)=>{
        console.log(res);
        this.setState(() => ({
        list:[...res.data]
        })
    })
    .catch(()=>{alert('error')})
}
複製代碼

react中的css過渡動畫

使用react-transition-group，引入CSSTransition這個組件，再用這個組件名去包裹須要動畫效果的標籤。她會自動向標籤中加入class樣式。