React Hooks + Umi Hooks + Ant Design Pro -------- 实时请求数据，监测到数据改变就局部刷新表格

1.前期准备

必要条件1：首先得有一个高级表格，没有自己就去官方文档找一个
必要条件2：高级表格获取数据源方式为request
必要条件3：有umi的包 能用useRequest(setTimeout应该也可以但操作应该不一样)
原因：我用的这个

2.实现

1.定义两个状态

params用来装局部刷新的请求数据
compareData用来装最近两次请求回来的数据

 const [params, setParams] = useState<any>({});
 const [compareData, setCompareData] = useState<any[]>([]);

```javascript
request={async (params, sorter, filter) => {
          setParams(params)
          ......

### 2.创建轮询函数，在其onSuccess函数里将本次请求得到的数据放入

```java
compareData中  const { data, run, cancel } = useRequest(queryTasks, {
    manual: true,
    pollingInterval: 10000,
    pollingWhenHidden: false,
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
       }
    },
  });

3.当compareData的长度为2时，通过对比，判断是否不同（此处为数组对象所以转字符串来对比）

    ......
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
      } else if (compareData.length === 2) {
        if (JSON.stringify(compareData[0]) !== JSON.stringify(compareData[1])) {
          console.log(compareData)
        }
      }
    },
  });

4.对比后，如果发生改变就局部刷新表格

  ......
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
      } else if (compareData.length === 2) {
        if (JSON.stringify(compareData[0]) !== JSON.stringify(compareData[1])) {
          console.log(compareData);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }
      }
    },
  });

5.对比后，删掉第一项，保证下一次对比能正常进行。

    ......
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
      } else if (compareData.length === 2) {
        if (JSON.stringify(compareData[0]) !== JSON.stringify(compareData[1])) {
          console.log(compareData);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }
        setCompareData([compareData[1]]);
      }
    },
  });

6.设置当请求条件变更后执行本函数（第一次进入也会执行）

当请求条件变更后即换页，查询等情况，可达到局部对比局部刷新效果
注意需要先停止当前轮询再开始新的

  useEffect(() => {
    cancel(); //先停止当前轮询
    setCompareData([]);
    run(params);
  }, [params]);