React元件效能優化

蛋白發表於2017-08-03
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>
        );
    }
}

相關文章