React性能優化系列之減小props改變

React性能優化的一個核心點就是減小render的次數。若是你的組件沒有作過特殊的處理（SCU -- shouldComponentUpdate或使用PureComponent），那每次父組件render時，子組件就會跟着一塊兒被從新渲染。一般一個複雜的子組件都會進行一些優化，好比：SCU 使用PureComponent組件。對於SCU基本上進行的也都是淺比較，深比較的代價過高。

對於這些被優化的子組件，咱們要減小一些沒必要要的props改變：好比事件綁定。對於那些依賴於配置項的組件，咱們更是減小這些做爲props的配置的變化，由於可能一但配置項發生了變化，整個組件都會跟着從新渲染，因此咱們要儘量的減小props的改變

事件綁定

class ClickMe extends React.Component {
    state = {
        value: '3333',
    };

    render() {
        return (
            <Button
                onClick={() => {
                    console.log('l am clicked!', this.state.value);
                }}
            >
                click me
            </Button>
        )
    }
}

相信大多數的開發者React都會指出這種寫法的缺點：每次ClickMe組件渲染的時候onClick屬性與上一次的值相比都是一個不一樣的匿名函數，若是Button是一個複雜的子組件且內部沒有通過任何特殊的處理，那就會形成多餘的渲染。對於這種狀況的作法通常有兩種方式：

• 在構造函數內綁定 this
• 將箭頭函數賦予class的屬性

class ClickMe extends React.Component {
    state = {
        value: '3333',
    };

    handleClick = () => {
        console.log('l am clicked!', this.state.value);
    };

    render() {
        return (
            <Button
                onClick={this.handleClick}
            >
                click me
            </Button>
        )
    }
}

// 或
class ClickMe extends React.Component {
    constuctor(props) {
        super(props);
        this.state = {
            value: '3333',
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log('l am clicked!', this.state.value);
    }

    render() {
        return (
            <Button
                onClick={this.handleClick}
            >
                click me
            </Button>
        )
    }
}

批量事件綁定

那在考慮下面這種狀況，涉及到子組件的批量綁定時：

class MultiClick extends React.Component {
    dataSource = [
        { key: '1', value: '1' },
        { key: '2', value: '2' },
        { key: '3', value: '3' },
        { key: '4', value: '4' },
    ];

    handleClick = key => {
        console.error('key:', key);
    };

    render() {
        return (
            <div>
                {this.dataSource.map(item => (
                    <div
                        key={item.key}
                        onClick={() => {
                            this.handleClick(item.key);
                        }}
                    >
                        {item.value}
                    </div>
                ))}
            </div>
        );
    }
}

相似於這種須要傳遞參數的狀況，該如何去優化？

這個就須要咱們去作數據的緩存，即回調的緩存，上述例子以下：

cacheMap = {};

genClickHandler = key => {
    if (!this.cacheMap[key]) {
        this.cacheMap[key] = () => {
            console.error('key:', key);
        };
    }
    return this.cacheMap[key];
};

// 綁定
<div key={item.key} onClick={this.genClickHandler(item.key)}>
    {item.value}
</div>;

若是多個基本類型的參數能夠，將他們拼接成字符串做爲cacheMap的key，簡單的引用類型可使用JSON.stringify，不過原則上做爲事件綁定的函數 傳遞的參數簡單爲好。

做爲配置的props緩存

說到數據的緩存，無論光是事件的回調，還有不少 其餘狀況。好比表格的 columns須要根據屬性變化的這種場景：

class TableDemo extends React.Component {
    getColumns = () => {
        const { name } = this.state;
        return [
            {
                key: '1',
                title: `${name}_1`,
            },
            {
                key: '2',
                title: `${name}_2`,
            },
        ];
    };

    render() {
        const { dataSource } = this.props;
        return <Table dataSource={dataSource} columns={this.getColumns()} />;
    }
}

這種狀況每次組件render的時候，getColumns都會被調用一次，而這個函數每次的返回值都是不同的 ，及時這兩次的name值都相等，緣由你們能夠類比[] !== []這裏就不過多敘述了。

有一種作法是，將columns做爲一個this.state的一個屬性，在初始化和每次 this.state.name改變的時候同步改變this.state.columns的值，但若是有多個 相似於this.state.name的變量控制this.state.columns的值時候，發現每一個變量變化的時候都要調用生成columns的方法， 十分的煩瑣易形成錯誤。

使用緩存能夠很好的解決這個問題，在參數較爲複雜的時候，咱們選擇只緩存上一次的值。先看代碼再說：

首先咱們寫一個緩存的函數

function cacheFun(cb) {
    let preResult = null
    let preParams = null
    const equalCb = cb || shallowEqual
    return (fun, params) => {
        if (preResult && equalCb(preParams, params)) {
            return preResult
        }
        preResult = fun(params)
        preParams = params
        return preResult
    }
}

這個緩存函數是一個閉包函數，保存了上一次的參數和上一次的結果，主要的實現就是比較兩次的參數，相同則返回上一次結果，不一樣則返回 調用函數的新結果。固然 對於某些特殊的狀況只須要根據傳入特定的某幾個參數作出判斷，這種狀況你能夠傳入自定義的比較函數。先看一下上面的實現：

cacheFun函數第一個參數爲選填的選項，是你比較兩次參數的 方法，若是你不傳入則僅進行 淺比較（與 React 的淺比較類似）。

返回函數的第一個參數爲你的 生成columns的回調，params 爲你須要的 變量，若是你的變量比較多，你能夠將他們 做爲一個對象傳入；那麼代碼就相似以下：

const params = { name, time, handler };
cacheFun(this.getColumns, params, cb);

在類中的使用爲：

class TableDemo extends React.Component {
    getColumns = name => {
        return [
            {
                key: '1',
                title: `${name}_1`,
            },
            {
                key: '2',
                title: `${name}_2`,
            },
        ];
    };

    getColumnsWrapper = () => {
        const { name } = this.state;
        return cacheFun()(this.getColumns, name);
    };

    render() {
        const { dataSource } = this.props;
        return (
            <Table dataSource={dataSource} columns={this.getColumnsWrapper()} />
        );
    }
}

假如你不喜歡對象的傳值方式，那你能夠 對這個緩存函數進行更改：

function cacheFun(cb) {
    let preResult = null;
    let preParams = null;
    const equalCb = cb || shallowEqual;
    return (fun, ...params) => {
        if (preResult) {
            const isEqual = params.ervey((param, i) => {
                const preParam = preParams && preParams[i];
                return equalCb(param, preParam);
            });
            if (isEqual) {
                return preResult;
            }
        }
        preResult = fun(params);
        preParams = params;
        return preResult;
    };
}

你這能夠這樣使用：

cacheFun()(this.getColumns, name, key, param1, params2);
// 或者
cacheFun()(this.getColumns, name, key, { param1, params2 });

這樣配置也就被緩存優化了，當TableDemo組件因非name屬性render時，這時候你的columns仍是返回上一次緩存的值，是的Table這個組件減小了一次因columns引用不一樣產生的render。若是Table的dataSource數據量很大，那此次對應用的優化就很可觀了。

數據的緩存

數據的緩存在原生的內部也有使用cacheFun的場景，如對於一個list 根據 searchStr模糊過濾對於的subList。

大體代碼以下：

class SearchList extends React.Component {
    
    state = {
        list: [
            { value: '1', key: '1' },
            { value: '11', key: '11' },
            { value: '111', key: '111' },
            { value: '2', key: '2' },
            { value: '22', key: '22' },
            { value: '222', key: '222' },
            { value: '2222', key: '2222' },
        ],
        searchStr: '',
    }

    // ...

    render() {
        const { searchStr, list } = this.state
        const dataSource = list.filter(it => it.indexOf(searchStr) > -1)
        return (
            <div>
                <Input onChange={this.handleChange} />
                <List dataSource={dataSource} />
            </div>
        )
    }
}

對於此情景的優化使用cacheFun也能夠實現

const dataSource = cacheFun()((plist, pSearchStr) => {
    return plist.filter(it => it.indexOf(pSearchStr) > -1)
}, list, searchStr)

可是有大量的相似於此的衍生值的時候，這樣的寫法又顯得不夠。社區上出現了許多框架如配合react-redux使用reselect（固然也能夠單獨使用，不過配合redux使用簡直就是前端數據管理的一大殺手鐗），還有mobx的衍生概念等。這些後續會單獨介紹，這裏就稍微提一下。