PropTypes和DefaultProps

PropTypes用來校驗從父元件傳遞的屬性的型別

TodoItem.propTypes = {
    item: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    deleteItem: PropTypes.func,
    test: PropTypes.string.isRequired
}

defaultProps用來設定屬性的預設值

TodoItem.defaultProps = {
    test: 'hello'
}

props、state和render函式的關係

當元件的state或者props發生改變的時候，render函式就會重新執行

當父元件的render函式被執行時，子元件的render函式都將被重新執行

虛擬DOM

生成新的DOM需要呼叫WEB API，每個元素都很多屬性和內容，所以DOM操作很消耗效能

虛擬DOM，使用JS模擬/描述DOM結構，通過Diff演算法，來對比兩次虛擬DOM（JS物件）的差異
能精確定位到發生變化的屬性/元素然後再進行渲染，而不是重新渲染整個元素或DOM樹，進而大大提高效能

React中的Diff演算法

虛擬DOM比對是通過Diff（Different）演算法實現的，比對規則

1、同級比較，第一層一致，再比對下一層，若有差異，就不再往下比對，提示比對速度

2、通過key值，可以迅速匹配到比對物件；所以key值要唯一且穩定，不要用index做key值

3、setState方法是非同步的，短時間內的多次setState可以合併成一次，減少虛擬DOM比對次數

React中ref的使用

reference引用，用來獲得頁面上的DOM元素
ref={(input) => { this.input = input }}後 this.input可以替換this.input

在與setState同時使用時，要將DOM操作放在setState的第二個引數中，也是一個匿名/箭頭函式

因為setState是一個非同步的方法，通過ref獲得的DOM元素並不是最新的，而且react

React生命週期函式

指在某一時刻元件會自動執行的函式

將被廢棄的生命週期函式：componentWillMount()、componentWillUpdate()、componentWillReceiveProps()

axios的使用

安裝依賴包npm install axios --save

import axios from 'axios'
componentDidMount() {
    axios.get('/api/list.json').then((res) => {
        this.setState(() => ({
            list: [...res.data.list] //最好打散
        }))
    }).catch(() => { alert('error') })
}

避免子元件重複渲染

使用shouldComponentUpdate生命週期函式

shouldComponentUpdate(nextProps) {
    if (nextProps.item !== this.props.item) {
        return true
    } else {
        return false
    }
}

react-transition-group動畫

安裝npm install react-transition-group --save

JSX模板

import { CSSTransition } from 'react-transition-group'
<CSSTransition
    in={this.state.flag}
    timeout={1000}
    classNames='fade'
    unmountOnExit
    appear={true}
    onEntered={(el) => { el.style.color = 'red' }}
>
    <div>hello</div>
</CSSTransition>

CSS樣式

.fade-enter, .fade-appear {
    opacity: 0;
}

.fade-enter-active, .fade-appear-active {
    opacity: 1;
    transition: all 1s ease-in;
}

.fade-enter-done, .fade-appear-done {
    opacity: 1;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: all 1s ease-in
}

.fade-exit-done {
    opacity: 0;
}

<TransitionGroup>、<CSSTransiton>用於對一組元