用函数式组件方法重新渲染and table中的render方法
时间: 2024-03-20 08:44:51 浏览: 29
使用函数式组件实现Table组件的话,我们可以使用React.memo方法来实现shouldComponentUpdate的功能,对比前后props是否有变化,如果有变化则重新渲染组件。同时,对于Table组件中的render方法,也可以使用React.memo来进行优化。
具体实现如下:
```javascript
import React, { memo } from "react";
import { Table } from "antd";
const MyTable = memo(({ dataSource, columns }) => {
const renderAge = (text) => {
return <span>{text}岁</span>;
};
const newColumns = [
...columns,
{
title: "年龄",
dataIndex: "age",
key: "age",
render: renderAge,
},
];
return <Table dataSource={dataSource} columns={newColumns} />;
});
export default MyTable;
```
在上面的代码中,我们使用memo方法对MyTable组件进行了包装,实现了对props的比较和渲染的优化。同时,我们也将年龄列的渲染方式从columns中抽离出来,放到了组件内部,方便管理和修改。
这样,我们就可以通过函数式组件的方式实现Table组件的重新渲染和render方法的优化了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)