React还能这么玩（二）组件props传入方法替代直接传值

React还能这么玩（二）组件props传入方法替代直接传值

一、例子

这是一个渲染列表的组件使用方式，这边有个按钮实现点击下载列表的数据。由前端数据生成Excel：

class App {
    handleColumns = () =>{
        // 一堆计算
        return []
    }
    getDownloadFileName = () =>{
        // 一堆计算
        return `${dateStr}_${timestamp}.xlsx`;
    }
    render(){
        const {dataSource} = this.state;
        // 要导出的数据
        const downloadExcelData={
            isDownTableExcel: true,
            iconTitle: '',
            downloadExcelHeader: this.getColumns(),
            linkName: this.getDownloadFileName()
        };
        return (
        <MyTable
            dataSource={dataSource}
            columns={this.getColumns()}
            downloadExcelData={downloadExcelData}
            rowKey="seq"
            pagination={false}
        />
        );
    }
}

二、方案

Table下载这个动作需要手动触发，每次组件渲染，并不需要下载的配置数据。因此，只需要在点击下载的时候才去获取数据：

• 旧的参数

const downloadExcelData={
    downloadExcelHeader: this.handleColumns(),
    linkName: this.getDownloadFileName()
};

• 新的参数

const downloadExcelData={
    getDownloadExcelHeader: this.handleColumns,
    getLinkName: this.getDownloadFileName
};

当然，这边MyTable组件内部需要改成能接受新参数的方式才能这样改。

class App {
    handleColumns = () =>{
        // 一堆计算
        return []
    }
    getDownloadFileName = () =>{
        // 一堆计算
        return `${dateStr}_${timestamp}.xlsx`;
    }
    render(){
        const {dataSource} = this.state;
        // 要导出的数据
        const downloadExcelData={
            isDownTableExcel: true,
            iconTitle: '',
            getDownloadExcelHeader: this.getColumns,
            getLinkName: this.getDownloadFileName
        };
        return (
        <MyTable
            dataSource={dataSource}
            columns={this.getColumns()}
            downloadExcelData={downloadExcelData}
            rowKey="seq"
            pagination={false}
        />
        );
    }
}

三、优化后

• 减少计算量
  不需要每次组件更新都去算一遍下载需要的数据，减少无所谓的运算

• 提高React性能
  MyTable组件判断是否更新的时候无需去判断downloadExcelData里面所有对象数据，减少对象深层比较的性能消耗