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是一個復雜的子組件且內部沒有經過任何特殊的處理，那就會造成多余的渲染。對于這種情況的做法一般有兩種方式：
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的衍生概念等。這些后續會單獨介紹，這里就稍微提一下。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
