reacthook+antd modal模态框里放一个table表格进行搜索框数据填写的时候选择搜索项onChange事件会导致模态框重新重新渲染。实现模态框搜索数据的时候列表刷新并且模态框不会关闭，使用usememo应该可以解决这个问题。可以帮我写个小demo。

当您在模态框中使用搜索框时，每次更改搜索项时，会导致整个模态框重新渲染。这是因为每次更改搜索项时，该组件的状态都会被更新，从而导致重新渲染。为了避免这种情况，您可以使用 useMemo 钩子来记忆搜索结果。这样，只有在搜索数据发生更改时，模态框才会重新渲染。

以下是一个使用 useMemo 的示例代码，包括一个带搜索框的模态框和一个表格：

import React, { useState, useMemo } from 'react';
import { Modal, Input, Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const SearchModal = ({ visible, onCancel }) => {
  const [searchText, setSearchText] = useState('');
  const [searchColumn, setSearchColumn] = useState('name');

  // 使用 useMemo 记忆搜索结果
  const searchResult = useMemo(() => {
    return data.filter(item =>
      item[searchColumn].toLowerCase().includes(searchText.toLowerCase())
    );
  }, [searchColumn, searchText]);

  const handleSearchTextChange = e => {
    setSearchText(e.target.value);
  };

  const handleSearchColumnChange = value => {
    setSearchColumn(value);
  };

  return (
    <Modal visible={visible} onCancel={onCancel}>
      <Input.Search
        placeholder="Search"
        value={searchText}
        onChange={handleSearchTextChange}
        style={{ width: 200, marginRight: '16px' }}
      />
      <select value={searchColumn} onChange={e => handleSearchColumnChange(e.target.value)}>
        <option value="name">Name</option>
        <option value="age">Age</option>
        <option value="address">Address</option>
      </select>
      <Table columns={columns} dataSource={searchResult} />
    </Modal>
  );
};

export default SearchModal;

在这个例子中，我们使用了两个 useState 钩子来管理搜索文本和搜索列的状态。我们还使用了 useMemo 钩子来记忆搜索结果。每当搜索文本或搜索列更改时，搜索结果将被重新计算。

现在，您可以在包含 SearchModal 的父组件中使用它：

import React, { useState } from 'react';
import SearchModal from './SearchModal';

const ParentComponent = () => {
  const [visible, setVisible] = useState(false);

  const handleShowModal = () => {
    setVisible(true);
  };

  const handleCancelModal = () => {
    setVisible(false);
  };

  return (
    <>
      <button onClick={handleShowModal}>Show Modal</button>
      <SearchModal visible={visible} onCancel={handleCancelModal} />
    </>
  );
};

export default ParentComponent;

这样，每当您在模态框中更改搜索文本或搜索列时，只有表格内容会被重新渲染，而模态框本身不会被重新渲染或关闭。