Repository: ant-design
Issue: [Bug] [Table] Component wrapped by React.memo passed into `components` prop of Table will get unmounted every time Table renders.
Labels: Inactive

- [x] I have searched the [issues](https://github.com/ant-design/ant-design/issues) of this repository and believe that this is not a duplicate.

### Reproduction link
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/antd-table-mergeobject-bug-j9dse)

### Steps to reproduce
At [ `rc-table`](https://github.com/react-component/table/blob/dd480b2d4a56432d09b942872366cb7190d6cafc/src/Table.tsx#L226) , it will recreate the `components` prop passed into the `Table`, it will use the `mergeObject` helper function. This will make our memo or forwardRef Component in `components`(like `components.body.wrapper`) **become a new object**, so the Component will be unmounted and recreate & remount. The reason is below:



```jsx
function mergeObject(...objects) {
  const merged = {};

  function fillProps(obj, clone) {
    if (clone) {
      Object.keys(clone).forEach(key => {
        const value = clone[key];
        if (value && typeof value === 'object') {
          obj[key] = obj[key] || {};
          fillProps(obj[key], value);
        } else {
          obj[key] = value;
        }
      });
    }
  }

  objects.forEach(clone => {
    fillProps(merged, clone);
  });

  return merged;
}

// try this:

function FooComponent() {}

const BarComponent = React.memo(function BarComponent() {})

const BazComponent = React.forwardRef(function BazComponent() {})

const components = {
    body: {
        wrapper: FooComponent,
        row: BarComponent,
      	cell: BazComponent
    }
}

const mergedComponents = mergeObject(components, {});

console.log('mergedComponents.body.wrapper === FooComponent', mergedComponents.body.wrapper === FooComponent);
console.log('mergedComponents.body.row === BarComponent', mergedComponents.body.row === BarComponent);
console.log('mergedComponents.body.cell === BazComponent', mergedComponents.body.cell === BazComponent);
```



![image](https://user-images.githubusercontent.com/18418010/141996677-5df6e59d-83c3-413f-8534-f454b9927ec2.png)






So, if we have codes that will `setState` in the component at some situations, it will throw Error: `Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.` 

### What is expected?
Component won't be unmounted.

### What is actually happening?
Component be unmounted.

| Environment | Info |
|---|---|
| antd | 4.17.0 |
| React | latest |
| System | MacOS |
| Browser | Chrome 95 |

---
### Possible solution

I think we can just remove the `mergedComponents` logic and use `components` directly instead. But if you want keep that, you probably need do more precise checks like [ReactIs.isMemo](https://github.com/facebook/react/blob/main/packages/react-is/src/ReactIs.js#L131)  or [ReactIs.isForwardRef](https://github.com/facebook/react/blob/4ff5f5719b348d9d8db14aaa49a48532defb4ab7/packages/react-is/src/ReactIs.js#L122) in the `mergeObject` function.


<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->