React 高阶组件应用（一） 改善 antd Table组件的渲染效率

一、前言

对于react 高阶组件。大家基本只知道定义和用法，在实际开发中，使用的可能并不多。项目组下来一个任务，重写某个由Antd Table渲染为主要功能的模块，这里发现一些问题，Antd Table在渲染时，即使没有改变Table的props，只是改变包裹Table的组件，Table组件也会重新渲染。

二、问题产生

import {
    Table} from 'antd';
class TestRoot extends Component {
   
	change() {
   
	 		this.setState({
   
	            self_state: 2
	        });
	}
	render() {
   
	        const columns = [
	            {
   
	                title: '姓名',
	                dataIndex: 'name',
	                key: 'name',
	                render: (text, record, index) => {
   
	                    console.log('rerendered !!!')
	                    return <div>{
   text}</div>;
	                }
	            },
	            {
   
	                title: '年龄',
	                dataIndex: 'age',
	                key: 'age'
	            },
	            {
   
	                title: '住址',
	                dataIndex: 'address',
	                key: 'address'
	            }
	        ];
	        return (
	            <div>
	                <h1>{
   this.state.self_state}</h1>
	                <Table columns={
   columns} dataSource={
   this.state.data_arr} />