返回函数的第一个参数为你的 生成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的衍生概念等。这些后续会单独介绍，这里就稍微提一下。