javascript - 如何处理导致不需要的组件重新安装的 react History.Push()？

Question

问题
调用history.push()组件内部似乎会导致整个 react 组件卸载和重新安装；导致毫无意义的远程服务调用。
具体来说，我有一个在组件条目上触发的远程服务调用。我不希望组件重新安装，也不希望服务调用重新运行(它很慢)。
好像是 history.push(location.pathname + '?' + encodeURI(urlSearchParams.toString()));无论如何都会导致卸载。我使用不正确吗？是否有更好的方法来跟踪用户过滤器更改的历史，而不必担心无关的服务调用？
意向
我正在使用 history.push()使用对查询参数的更改来更新浏览器历史记录。查询参数控制表数据的过滤，例如 ?sort=asc&isCompleted=true ， ETC。
当用户更改他们的过滤设置时，我打算简单地过滤存储在 state 中的现有表数据，而不是远程重新加载数据并强制用户坐下来等待。我还希望用户能够与包含适当过滤器的其他用户共享 URL。
我试过的

尝试完全删除 history.push() ，仅使用状态。这可行，但意味着不可能有一个可共享的 URL，其中过滤器作为查询参数附加。

尝试修改 useEffect() 和 useRef() 但对不断的重新安装感到沮丧。

组件代码

import React, { useEffect, useState } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

export const WidgetTable = () => {
  let urlSearchParams = useQuery();
  let history = useHistory();
  let location = useLocation();

  const [originalTableData, setOriginalTableData] = useState<TableData| undefined>(undefined);
  const [filteredTableData, setFilteredTableData] = useState<TableData| undefined>(undefined);

  // go get the table data from the remote service
  const fetchTableData = async () => {
   <- go remotely fetch table data and then set originalTableData ->
  }

  // triggered when a user sets a filter on the table (updates the data displayed in the table)
  const filterTableData = () => {
   <- filter the existing table data in state and then set the filterdTableData ->
  }

  // also triggered when a user sets a filter on the table (updates the URL in the browser)
  const setFilter = (filterToSet: ReleasePlanFilterType, value: string) => {
    switch (filterToSet) {
      case ReleasePlanFilterType.Target: {
        if (urlSearchParams.get(filterToSet)) {
          urlSearchParams.set(filterToSet, value);
        } else {
          urlSearchParams.append(filterToSet, value);
        }
        break;
      }
      <snip>
    }

   // We've set the filter in the query params, but persisting this to the history causes a reload :(
   history.push(location.pathname + '?' + encodeURI(urlSearchParams.toString())); 
  
  }

  useEffect(() => {
    fetchTableData();
  }, []);

  return (<snip> a fancy table and filtering controls <snip>);

}

Answer 1

据我所知，在阅读了其他几个类似的堆栈溢出问题之后，似乎没有办法不重新安装(重新渲染)组件。历史更改会自动导致 react 路由器 dom 如何处理幕后事务的 prop 更改。我发现这些问题中的大多数都使用了类组件，答案是使用 shouldComponentUpdate 来查看以前的路径是否等于新路径。如果他们是平等的，那么他们就会回来，基本上是这样他们就不会重新渲染。

shouldComponentUpdate: function(nextProps, nextState) {
  if(this.props.route.path == nextProps.route.path) return false;
  return true;
}

来源: Prevent react-router history.push from reloading current route
所以现在的问题是将其转换为使用钩子(Hook)。我需要运行一些测试，但我相信这应该适用于您的用例。

useEffect(() => {
    fetchTableData();
}, [location.pathname]);

通过添加 location.pathname作为依赖项，只有在路径名实际更改时才应调用此效果。