React組件性能優化

純函數

1.PureRender是React組件開發中一個重要的概念,PureRender中的Pure指的就是組件知足純函數的條件,
即組件的渲染是被相同的props和state渲染進而獲得相同的結果.
2.react-addons-pure-render-mixin插件,其原理爲從新實現了shouldComponentUpdate生命週期方法,
讓當前傳入的props和state與以前的做淺比較,若是返回false,那麼組件就不會執行render方法.
這裏講到了用shouldComponentUpdate來作性能優化的方法,在理想狀況下,不考慮props和state的類型,
那麼要作到充分比較,只能經過深比較,但它實在是太昂貴了.
而後PureRender對object只作了引用比較,並無作值比較.

shallowEqual(obj, newObj) {
    if (obj === newObj) {
        return true;
    }

    const objKeys = Object.keys(obj);
    const newObjKeys = Object.keys(newObj);

    if (objKeys.length !== newObjKeys.length) {
        return false;
    }

    // 關鍵代碼,
}

shouldComponentUpdate(props, state) {
    console.log(props);
    console.log(state);

    if (state.a === 3) {
        return false;
    }

    return true;
}

key

1.寫動態子組件的時候,若是沒有給動態子項添加key prop,則會報一個警告.
這個警告指的是,若是每個子組件是一個數組或迭代器的話,那麼必須有一個惟一的key prop.
key用來標識當前項的惟一性的props.
如過key={ index },把key設成了序號,這麼作的確不會報警了,但這是很是低效的作法.
咱們在生產環境下經常犯這樣的錯誤,這個key是每次用來作Virtual DOM diff的,每一位同窗都用序號
來更新的問題是它沒有和同窗的惟一信息相匹配,至關於用了一個隨機鍵,那麼不管有沒有相同的項,
更新都會被渲染.
所以,對key有一個原則,那就是獨一無二,且能不用遍歷或隨機值就不用,除非列表內容也並非惟一的表示,
且沒有能夠相匹配的屬性.

class Collections extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 1,
            array: [{
                sid: '1',
                name: 'aaa'
            }, {
                sid: '2',
                name: 'bbb'
            }, {
                sid: '3',
                name: 'ccc'
            }]
        }
    }

    render() {
        return (
            <div className="collections">
            {
                this.state.array.map((item, index) => {
                    return (
                        <div key={ item.sid }>{ item.name }</div>
                    )
                })
            }
            </div>
        );
    }
}