React組件性能優(yōu)化

KaltZK 發(fā)布于2019-08-20 18:31 / 1072人閱讀

摘要：純函數(shù)是組件開發(fā)中一個重要的概念中的指的就是組件滿足純函數(shù)的條件即組件的渲染是被相同的和渲染進(jìn)而得到相同的結(jié)果插件其原理為重新實(shí)現(xiàn)了生命周期方法讓當(dāng)前傳入的和與之前的作淺比較如果返回那么組件就不會執(zhí)行方法這里講到了用來做性能優(yōu)化的方

純函數(shù)

1.PureRender是React組件開發(fā)中一個重要的概念,PureRender中的Pure指的就是組件滿足純函數(shù)的條件,
即組件的渲染是被相同的props和state渲染進(jìn)而得到相同的結(jié)果.
2.react-addons-pure-render-mixin插件,其原理為重新實(shí)現(xiàn)了shouldComponentUpdate生命周期方法,
讓當(dāng)前傳入的props和state與之前的作淺比較,如果返回false,那么組件就不會執(zhí)行render方法.
這里講到了用shouldComponentUpdate來做性能優(yōu)化的方法,在理想情況下,不考慮props和state的類型,
那么要做到充分比較,只能通過深比較,但它實(shí)在是太昂貴了.
然后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;
    }

    // 關(guān)鍵代碼,
}

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

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

    return true;
}

key

1.寫動態(tài)子組件的時候,如果沒有給動態(tài)子項(xiàng)添加key prop,則會報一個警告.
這個警告指的是,如果每一個子組件是一個數(shù)組或迭代器的話,那么必須有一個唯一的key prop.
key用來標(biāo)識當(dāng)前項(xiàng)的唯一性的props.
如過key={ index },把key設(shè)成了序號,這么做的確不會報警了,但這是非常低效的做法.
我們在生產(chǎn)環(huán)境下常常犯這樣的錯誤,這個key是每次用來做Virtual DOM diff的,每一位同學(xué)都用序號
來更新的問題是它沒有和同學(xué)的唯一信息相匹配,相當(dāng)于用了一個隨機(jī)鍵,那么無論有沒有相同的項(xiàng),
更新都會被渲染.
因此,對key有一個原則,那就是獨(dú)一無二,且能不用遍歷或隨機(jī)值就不用,除非列表內(nèi)容也并不是唯一的表示,
且沒有可以相匹配的屬性.

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 (
            
            {
                this.state.array.map((item, index) => {
                    return (
                        { item.name }
                    )
                })
            }
            
        );
    }
}