更改搜索参数时如何防止重新渲染？

Question

有一个小组件，当您单击按钮时，URL 中的搜索参数会发生变化。但是当搜索参数更改时，整个组件都会重新渲染，是否可以只更改 url，而不重新渲染？或者也许在这里使用“use-query-params”并不是一个好主意？

import React from 'react';
    import { StringParam, useQueryParam } from 'use-query-params';
    import cl from './Footer.module.scss';
    
    const Footer = () => {
          const [tab, setTab] = useQueryParam('ptab', StringParam);
        
          const handleClick = e => setTab(e.target.name);
        
          const getClass = name => {
            const values = ['tab1', 'tab2', 'tab3'];
        
            if (tab === name || (name === 'tab4' && (!tab || !values.includes(tab)))) return cl.active;
            return '';
          };
        
          return (
            <ul className={cl.footer}>
              <li>
                <button name='tab1' onClick={handleClick} className={getClass('tab1')}>
                  Tab1
                </button>
              </li>
              <li>
                <button name='tab2' onClick={handleClick} className={getClass('tab2')}>
                  Tab2
                </button>
              </li>
              <li>
                <button name='tab3' onClick={handleClick} className={getClass('tab3')}>
                  Tab3
                </button>
              </li>
            </ul>
          );
        };
        
        export default Footer;

Answer 1

您可以使用 JS 历史记录 API。这是一个应该对您有帮助的简短示例：

import "./styles.css";

export default function App() {
  const handleClick = (e) => {
    const url = new URL(window.location);
    url.searchParams.set("tab", e.target.name);
    window.history.pushState({}, "", url);
  };

  return (
    <ul>
      <li>
        <button name="tab1" onClick={handleClick}>
          Tab1
        </button>
      </li>
      <li>
        <button name="tab2" onClick={handleClick}>
          Tab2
        </button>
      </li>
      <li>
        <button name="tab3" onClick={handleClick}>
          Tab3
        </button>
      </li>
    </ul>
  );
}

这里是codesandbox的链接：https://codesandbox.io/s/hardcore-babycat-rz1v9? file=/src/App.js:0-584